Jquery UI：ドロップイベントでIDを更新する方法

Question

私は自分の練習のために単純なドラッグアンドドロップを行っています。私は要素をドラッグしてドロップゾーンにドロップしていると私は2つのdivドラッグしていると私は彼らが両方の作業が重複しているが、私はテストクローン1であるIDをインクリメントしています。私はちょうど私がドロップでIDをインクリメントすることができることを知りたいのですが、デフォルトのIDがのtest-clone-1のように重複して増えているので（test-clone-2、test-clone-3）。私はドラッグしてドラッグすると、デフォルトのIDがのテストクローン1であり、今度は再びnドロップをドラッグすると、IDはのテストクローン2でなければなりませんが、ドラッグアンドドロップIDの増分互いに

$("#editorDesignView").droppable({ 
     accept: '.textTemplate', 
     drop: function(event, ui) { 
     var html = '<div id="test-clone-1" class="test" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p><div style="padding:10px; width:50%;" class="draggable-area">drag me</div><div style="padding:10px;width:50%;" class="js-duplicate">duplicate me</div></div>'; 
    $(html).appendTo(this).hide().slideDown(); 

     } 
    }); 
    $('#editorDesignView').sortable({ 
    handle: '.draggable-area' 
    }); 

Fiddle link

Answer 1

それを行うための現実的な方法はeditorDesignViewにtest-clone-でid初めを持つdiv要素を数えることです。

var cloneCount = $("#editorDesignView").find("div[id^='test-clone-']").length+1; 

cloneCountは今落ち要素に与える番号を保持します。

これはドラッグされたクローン（並べ替え）と同じです。
これは正しい番号を保証します。

実際には、クローンの順序を変更した場合、最後の要素が参照であり、最大の番号を持たないことがあります。

あなたのupdated Fiddleはここにあります。

Answer 2

にreletedあなたはこのような何かを意味する必要がありますか？あなたがドラッグアンドドロップすると、cが増加し、重複したときには、同じままになりますか？

var c = 1; 
    $(".textTemplate").draggable({ 
    helper: "clone", 
    zIndex: 2500, 
    }); 
    $("#editorDesignView").droppable({ 
     accept: '.textTemplate', 
     drop: function(event, ui) { 
     var html = '<div id="test-clone-'+c+'" class="test" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here. ' + c + '</p><div style="padding:10px; width:50%;" class="draggable-area">drag me</div><div style="padding:10px;width:50%;" class="js-duplicate">duplicate me</div></div>'; 
    $(html).appendTo(this).hide().slideDown(); 
     c++; 
     } 
    }); 
    $('#editorDesignView').sortable({ 
    handle: '.draggable-area' 
    });