空のスペースに並べ替え可能から画像をドラッグするたびに、新しい並べ替え可能が作成される機能が必要です。2 つの画像を並べ替え可能に保存すると、それらをドラッグでき、新しい並べ替え可能が実際に作成されます (灰色のボックス)。ここで、新しく作成された灰色のボックスから画像をドラッグできるようにしたいと考えています。これにより、空のスペースにドロップすると、新しい灰色のボックスが再び作成されます。これは動作しません。uls の関数を動的に作成された uls に伝播するにはどうすればよいですか? リフレッシュが機能していないように見えますか、それとも私の間違いはどこですか?
ここに私のjsfiddleがあります:http://jsfiddle.net/Gy74c/6/
$( "ul" ).sortable({opacity:0.4, connectWith: 'ul',tolerance:'pointer',cursor:'move', dropOnfull: true, stop :function (event,ui){
var positionLeft=ui.position.left;
var positionTop=ui.position.top;
var overSortable=elementBeingHoveredOver(event.pageX, event.pageY);
if (!overSortable){
var x=$ ("<ul id='sortable10' class='drop'></ul>");
$(x).css('position','absolute');
$(x).css('left',positionLeft);
$(x).css('top',positionTop);
$(x).css('height','70px');
ui.item.appendTo(x);
$(x).sortable({connectWith: 'ul'})
x.appendTo('#images');
$('#images').append(x);
$( "ul" ).sortable({ connectWith: 'ul'});
$("ul").sortable('refresh');
}
currentID=$(this).attr('id');
var liNumber=document.getElementById(currentID).getElementsByTagName("li").length;
if (liNumber==0 &&!currentID=="sortable1"){document.getElementById(currentID).style.visibility= "hidden"}
}//stop-function
});//sortable-block