Jquery UI: Wie kann ich ID auf Drop-Ereignis aktualisieren

Question

Ich mache einfache Drag N Drop für nur meine Praxis. Ich ziehe das Element und trage es in die Drop-Zone und es gibt zwei div ziehen mich und duplizieren mich sie beide funktionieren, aber in Doppelfunktion bin ich inkrementieren die ID, die ist test-clone-1 es funktioniert gut. Ich möchte nur wissen, dass, wie kann ich die ID auf Drop erhöhen, da auf Drop die Standard-ID ist test-clone-1 wie es auf Duplizieren erhöht wird wie (test-clone-2, test-clone-3). Ich möchte, dass, wenn ich ziehe das Element ziehen die Standard-ID ist test-clone-1 und wenn ich wieder n Tropfen jetzt die ID sollte Test-Clone-2 aber die Drag n Drop und doppelte ID-Inkrement sollten miteinander

$("#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

Der wahre Weg, es zu tun ist, um die div-Elemente, die ein id begining mit test-clone- in editorDesignView haben zu zählen.

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

cloneCount halten nun die Nummer des gelöschten Element zu geben.

Und das ist das gleiche für einen gezogenen Klon (Neuordnung).
Dies wird die richtige Nummer sicherstellen.

Wenn Sie die Klone neu geordnet haben, ist das letzte Element tatsächlich die Referenz und hat möglicherweise nicht die höchste Nummer.

Also hier ist Ihre updated Fiddle.

Answer 2

Sie so etwas wie dies bedeuten Releted werden? Wenn Sie ziehen und ablegen, wird c inkrementiert, und wenn duplicatie bleibt, bleibt c gleich.

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' 
    });