JQueryドラッグ、ドロップ、並べ替え

Question

私は左右の表を持っています。列の中で、PHPのループからいくつかの小さなテーブル（要素として）。 要素を左から右の列にドラッグアンドドロップし、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> 

だから、そのように、ありますようです機能間の競合。もし私がソート可能な関数だけを許可したら、それはOKですが、私は受信者colで何もできません。私はmysqlテーブルを更新するためにPHPにリクエストを送信したいと思います。

ありがとうございました！

Answer 1

あなたのコードを持ついくつかの問題があります。

• SortableがSortSerializeが存在しない
• 小文字で、私はあなたがしたいのでsortable("serialize")
• $('#rightMenu').draggableが$('#rightMenu').children().draggableに変更する必要があります意味だと思いますメニュー内の要素をドラッグします

jQuery UI Sortable docもご覧ください。