Usando jQuery UI drag-and-drop: cambiando el elemento arrastrado en la caída

Question

Al usar los arrastrables y arrastrables de la interfaz de usuario de jQuery, ¿cómo se puede cambiar el elemento arrastrado y soltado al soltar? Estoy tratando de arrastrar un DIV a otro DIV ordenable. En drop, me gustaría cambiar las clases en el DIV eliminado y cambiar su contenido innerHTML.

Después de leer varias preguntas StackOverflow, mi código es el siguiente:

$(".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>'); 
     } 
    } 
}) 

No está funcionando para mí. :-(

una copia completa de mi código se encuentra en http://www.marteki.com/jquery/bugkilling.php

Answer 1

Tomando el código JavaScript completo desde el enlace que diste, puede cambiar de la siguiente manera para hacer que funcione:.

$(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"); 
}); 

había un par de cuestiones:.

1. el evento de colocación (que usted muestra en su pregunta) no estaba disparando porque no estaban accept ing el contenido correcto
2. Si tiene .sortable & .droppable, termina con disparos extraños de eventos dobles. De todos modos, esto es innecesario, ya que puedes atrapar efectivamente el evento drop de los eventos de ordenables dado que lo has vinculado con el que se puede arrastrar.

otra cosa a tener en cuenta - que habría sido más agradable de usar el evento de la sortable receive en lugar de stop (ya que la parada es despedido cada vez que cualquier clasificación se detiene & reciben es específicamente allí para disparar cuando se coloca un nuevo elemento en la lista de clasificación), pero no funciona correctamente porque el item aún no se ha agregado a la lista ordenable, por lo que no podrá cambiarlo en ese momento. Funciona bien en stop simplemente porque ninguno de los otros elementos ordenables tiene la clase elemtxt.