Help me with JQuery UI & Drupal please !

Help me with JQuery UI & Drupal please !

Hi all! First of all, sorry about my english, i'm spnaish.

I need your help, i'm desesperate. I have looking for a code that i can use with a Drupal module to sort some elements, but i can't find the code that i want...


I installed the UI JQuery pluguin and i enabled it in Drupal Modules.


I know that i have to use this function:

        query_ui_add(array('ui.draggable', 'ui.droppable', 'ui.sortable'));

but the question is, how can i use it? what can i do?

i tried to mix the code at demo example with my drupal module, but i don't know how can i mix theme in php.

http://jqueryui.com/demos/sortable/


The code in drupal is below:

<?php

function metalinks_list() {
    //drupal_add_js(drupal_get_path('module','metalinks').'/metalinks.js');
    //drupal_add_js(drupal_get_path('module','jquery_ui').'/ui.sortable.js');
    //jquery_ui_add('ui.sortable');
    //drupal_add_js(drupal_get_path('module','metalinks').'/metalinks.css');
    jquery_ui_add(array('ui.draggable', 'ui.droppable', 'ui.sortable'));   
   
    global $user;
    //drupal_set_title(t('Links associats a: @name', array('@name' => $account->name)));
    $max = 20;
    $sql = 'SELECT lid,name,link FROM {metalinks} WHERE uid = %d';
    $header = array(
    array('data' => t('Title'), 'field' => 'name'),
    array('data' => t('Operations'), 'colspan' => 2)
      );
      $result = pager_query(db_rewrite_sql($sql . tablesort_sql($header)), $max, 0, $count_query = NULL, $user->uid);
    $rows = metalinks_build_rows($result);

    $output = '';
    $output = '<div class="outs">';
      $output .= theme_metalinks_list($header, $rows, $max);
    $output .= '</div>';
    if (Drupal.jsEnabled) {
        '$(document).ready(function(){
            $("outs").draggable();
            $("outs").droppable();
            $("outs").sortable();
        })';
    }



























function metalinks_build_rows($result) {
  global $user;
  $rows = array();
  while ($row = db_fetch_object($result)) {
        $may_edit = TRUE;
        $may_delete = TRUE;
        $rows[] = array(
            l($row->name,$row->link),
            $may_edit ? l(t('edit'), "metalinks/edit/$row->lid") : '',
            $may_delete ? l(t('delete'), "metalinks/delete/$row->lid") : ''
      );
  }
    /*$rows.sortable();
    $rows.draggable();
    $rows.droppable();*/

  return $rows;

 
function metalinks_theme() {
  return array(
    'metalinks_list' => array(
      'arguments' => array('header' => array(), 'rows' => array(), $max = 50),
    ),
  ); 

 
function theme_metalinks_list($header, $rows, $max) {
  if ($rows) {
    $pager = theme('pager', NULL, $max, 2);
    if (!empty($pager)) {
      $rows[] = array(array('data' => $pager, 'colspan' => 3));
    }
    $output .= theme('table', $header, $rows);
  }
  else {
    $output = t('Tu espacio está vacío.');
  }
  return $output;
}






































?>


Here is the topic in drupal forum, with the explanation and page view of the problem.

http://drupal.org/node/690158


Thanks a lot,

yours, m3n0R.