javascript - example - Usando jQuery UI drag-and-drop: cambiando el elemento arrastrado al soltar

drop jquery ui

Question

Al usar los juegos de arrastrar y soltar de jQuery UI, ¿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 de StackOverflow, mi código se ve así:

$(".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 mi. :-(

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

Answer 1

Tomando el código completo de JavaScript del enlace que diste, puedes cambiarlo de la siguiente manera para 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");
});

Hubo un par de problemas:

1. El evento drop (que muestra en su pregunta) no se activó porque no estaba accept el contenido correcto.
2. Si tienes tanto .sortable y .droppable , terminas disparando extraños 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: hubiera sido mejor utilizar el evento de receive la ordenada en lugar de stop (ya que la detención se dispara cada vez que se detiene y recibe específicamente está 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 puede cambiarlo en ese momento. Funciona bien en stop simplemente porque ninguno de los otros elementos ordenables tiene la clase elemtxt .