JQuery拖放和排序

Question

我有一张左右两边的桌子。在 cols 中，一些来自 PHP 循环的小表格（作为元素）。 我想让从左到右的 cols 拖放元素成为可能，并且还可以更改 col 本身内部的排序。对我来说太难了！

这是我的代码： HTML部分（左列右列相同）

<style>
.deplace{
cursor:move;
}
</style>

<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
<td id="leftMenu" valign="top" style="width:180px;height:800px;border:1px solid black">
<?php

while($rowg = mysql_fetch_assoc($sqlg)){

echo '<table width="100%" cellpadding="5" cellspacing="2" 
style="background-color:#CCC;border: 1px solid black;height:100px" 
class="deplace" id="left_'.$rowg['id'].'" modulename="'.modif_nom($rowg['module']).'"     sourceid="'.$rowg['id'].'">

echo '<tr><td" align="center" style="width:100%">'.$rowg['module'].'</td></tr>';

echo '</table>';
}
?>
</td></tr></table>

还有JS代码：

<script language="javascript" type="text/javascript">
$(document).ready(function() {  //

$('#leftMenu').Sortable({
  //revert: true,
  accept: 'deplace',
  axis : 'vertically',

  onchange: function(event, ui) { 
    serial = $.SortSerialize('leftMenu');
    $.ajax ( {
    url : "xhr.php?source=leftMenu",
    type : "get",
    data : serial.hash,
    success: function(data){alert(data);}
    });

  }
});

$('#rightMenu').Sortable({
  //revert: true,
  accept: 'deplace',
  axis : 'vertically',

  onchange: function(event, ui) { 
    serial = $.SortSerialize('rightMenu');
    $.ajax ( {
    url : "xhr.php?source=rightMenu",
    type : "get",
    data : serial.hash,
    success: function(data){alert(data);}
    });

  }
});
//only the functions to move the tables from left to right
$('#rightMenu').draggable({
    revert:false,
    helper:'original',

});

$('#leftMenu').droppable({
    over:function(event, ui){                     
    alert('dropped');
    }
});
});
</script>

所以，就像那样，功能之间似乎存在冲突。如果我只让可排序函数，那没关系，但我不能在接收器 col 中做任何事情，我想向 PHP 发送请求以更新 mysql 表。

非常感谢您的帮助！

Answer 1

您的代码存在一些问题：

• Sortable 是小写的
• SortSerialize 不存在，我想你的意思是sortable("serialize")
• $('#rightMenu').draggable 应该改成$('#rightMenu').children().draggable 因为你要拖拽菜单里面的元素

也看看jQuery UI Sortable doc。