Verwenden der jQuery-Benutzeroberfläche Ziehen und Ablegen: Ändern des gezogenen Elements beim Ablegen

Question

Wie können Sie beim Drag & Drop von jQuery UI-Drag & Drop-Elementen das Drag & Drop-Element ändern? Ich versuche, einen DIV zu einem anderen sortierbaren DIV zu ziehen. Bei Drop möchte ich die Klassen auf dem gelöschten DIV ändern und seinen innerHTML-Inhalt ändern.

Nach verschiedenen Fragen Stackoverflow zu lesen, sieht mein Code wie folgt aus:

$(".column").droppable({ 
    accept: '.element-dragging', 
    drop: function(event, ui) { 
     if ($(ui.draggable).hasClass("elemtxt")) { 
      $(ui.draggable).replaceWith('<div class="element element-txt">This text box has been added!</div>'); 
     } 
    } 
}) 

Es ist nicht für mich arbeiten. :-(

Eine vollständige Kopie meines Codes an http://www.marteki.com/jquery/bugkilling.php befindet

Answer 1

den vollen JavaScript-Code aus dem Link Taking gaben Sie, können Sie es wie folgt ändern, damit es funktioniert.

$(function() { 
    $(".elementbar div").draggable({ 
     connectToSortable: '.column', 
     cursor: 'move', 
     cursorAt: { top: 0, left: 0 }, 
     helper: 'clone', 
     revert: 'invalid' 
    }); 
    $(".elementbar div, .elementbar div img").disableSelection(); 
    $(".column").sortable({ 
     connectWith: '.column', 
     cursor: 'move', 
     cursorAt: { top: 0, left: 0 }, 
     placeholder: 'ui-sortable-placeholder', 
     tolerance: 'pointer', 
     stop: function(event, ui) { 
      if (ui.item.hasClass("elemtxt")) { 
       ui.item.replaceWith('<div class="element element-txt">This text box has been added!</div>'); 
      } 
     } 
    }); 
    $(".element").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"); 
}); 

Es gab ein paar Probleme.

1. Das Drop-Ereignis (das Sie in Ihrer Frage zeigen) feuert nicht, weil Sie nicht accept ing die richtigen Inhalte waren
2. Wenn Sie beide .sortable & .droppable haben, enden Sie mit seltsamen doppelten Ereignissen feuern. Dies ist ohnehin nicht notwendig, da Sie das Ereignis drop aus sortierbaren Ereignissen effektiv erfassen können, da Sie es mit dem ziehbaren verknüpft haben.

Eine andere Sache zu beachten - es wäre schöner gewesen, die sortierbare der receive Ereignis statt stop zu verwenden (da Stop jedes Mal jede Sortieranlage & ist speziell dort erhalten stoppt gefeuert wird ausgelöst, wenn Sie in ein neues Objekt fallen die Sortierliste), aber es funktioniert nicht richtig, weil die item noch nicht zur sortierbaren Liste hinzugefügt wurde, so dass Sie es zu diesem Zeitpunkt nicht ändern können. Es funktioniert in Ordnung, nur weil keine der anderen sortierbaren Elemente die elemtxt Klasse haben.