Использование jQuery UI drag-and-drop: изменение перетаскиваемого элемента по капле

Question

При использовании перетаскиваемых и сбрасываемых объектов в пользовательском интерфейсе jQuery, как вы изменяете перетаскиваемый элемент по капле? Я пытаюсь перетащить один DIV в другой сортируемый DIV. При добавлении я хотел бы изменить классы в отброшенном DIV и изменить его содержимое innerHTML.

После прочтения различных вопросов StackOverflow мой код выглядит следующим образом:

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

Это не работает для меня. : - (

Полная копия моего кода находится по адресу http://www.marteki.com/jquery/bugkilling.php.

Answer 1

Взяв полный код javascript по указанной вами ссылке, вы можете изменить его следующим образом, чтобы он работал:

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

Было несколько проблем:

1. Событие отбрасывания (которое вы показываете в своем вопросе) не сработало, потому что вы не * accept получали правильный контент.
2. Если у вас есть оба .sortable & .droppable, вы получите странные двойные события. В любом случае это не нужно, так как вы можете эффективно извлечь событие сброса из событий сортируемого, если вы связали его с перетаскиваемым.

Еще одна вещь, на которую следует обратить внимание - было бы лучше использовать событие receive для сортируемого элемента вместо stop (так как остановка срабатывает каждый раз, когда сортировка останавливается и получает специально для того, чтобы выстрелить, когда вы бросаете новый элемент в список сортировки), но он не работает должным образом, поскольку item еще не был добавлен в сортируемый список, поэтому вы не можете изменить его в этот момент. Он работает нормально на остановке просто потому, что ни один из других сортируемых предметов не имеет класса elemtxt.