Question

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

这是我的代码： HTML部分（左侧col，但右侧是相同的）

<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。

JQuery拖放，排序和排序

1 个答案: