javascript - jQuery Draggable が期待どおりに動作しない

Question

このフィドルの jQuery ドラッグ アンド ドロップ環境が期待どおりに動作しません。最初の各 div は自由にドラッグ可能である必要があり、「adddiv」ボタンは別のドラッグ可能な div を追加します。それらはドラッグ可能であってはならず、その位置でフリーズせずに再度ドラッグできるようにする必要があります。

以前は .draggable()、ドラッグを有効にして、コンソールに配置を報告し、.append()さらに div を追加していました。

最初の移動の直後はフリーズしますが、追加された div は再び移動できます。

Answer 1

I fixed your issue.

You were creating a div with the same id '6' each time you clicked on add div.

$("#adddiv").click(function() {
  $('<div></div>').draggable().appendTo($('#set'));

});

Fiddle : http://jsfiddle.net/vQ3Tg/1/

Answer 2

次のように、属性値を動的に割り当てます。

  $("#adddiv").click(function() {

       var lastid = $("#set div").last().attr('data-need')
       lastid = parseInt(lastid) + 1;

       $('#set').append('<div id="' + lastid+ '" data-need="' +lastid + '"></div>');
       $( "#" + lastid ).draggable();
 });

これを行うには、もっと簡潔な方法があるかもしれません。それでも、これは jsFiddle http://jsfiddle.net/vQ3Tg/で、動的に追加された複数のブロックに対して、フリーズすることなく機能します。

Answer 3

id の代わりにクラスを使用する必要があります。デモはこちら.

$('#set').append('<div class="6" data-need="6"></div>');