これは、ソート可能オブジェクトに接続されたドラッグ可能オブジェクトの私のコードです。重要なのは、私はたくさんの属性を持つLIを作成しているということです。しかし、アイテムをドロップ可能なdivにドラッグすると、sortableは新しいliタグを作成し、作成したliをそれでラップします。
これは次のようになります。
<ul>
<li class="ui-draggable" style="display: list-item;">
<li class="X" onclick="myFunc()"> My LI</li>
<li>
</ul>
私の意図はこのようなものを持つことですが:
<ul>
<li class="X" onclick="myFunc()"> My LI</li>
</ul>
では、どうすればこれを行うことができますか?
そしてコード:
$(document).ready(function() {
$('.draggable_text > li').draggable({
helper: function(event, ui) {
return '<div class="placeholder_sortable"> </div>'
},
connectToSortable:'#stagerows'
});
$('#stagerows').sortable({
handle: '.drag_handle',
placeholder: 'placeholder_sortable'
});
/**
* When item is dropped from the Add <Stuff>
*/
$('#stagerows').droppable({
drop: function(event, ui){
return ui.draggable.html('<li class="X" onclick="myFunc()"> My LI</li>')
}
});
});