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

При использовании jQuery UI draggables и droppables, как вы изменяете элемент перетаскивания и удаления при удалении? Я пытаюсь перетащить один 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.

Ответы

Ответ 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");
});

Возникла пара проблем:

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

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