使用jQuery UI拖放：在拖放时更改被拖动的元素

Question

在使用jQuery UI的可拖动和放置时，如何在放置后更改被拖放的元素？我正在尝试将一个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。

- Naa Marteki Reed

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. 你在问题中展示的放置事件没有触发，因为你没有接受正确的内容。
2. 如果你同时使用 .sortable 和 .droppable，就会出现奇怪的重复事件。这是不必要的，因为你可以有效地从 sortable 的事件中抓取 drop 事件，因为你已经将它与 draggable 相链接。

还有一件事情需要注意——最好使用 sortable 的 receive 事件而不是 stop（因为 stop 每次排序停止时都会触发 & receive 是专门为当你把新项目拖入排序列表时触发的），但它不能正常工作，因为 item 还没有被添加到 sortable 列表中，所以你无法在那时改变它。它在 stop 上可以正常工作，仅仅因为其他可排序的项目没有 elemtxt 类。

- Alconja

---

我尝试在“接收”事件上进行操作，但是失败了。感谢你提供详细的答案！ - Al.

我也是 - 这值得两个答案的赞扬 :-) - Luke Maurer

我也是。我已经苦思冥想了两个小时，但找不到一个合适的解释。感谢@Alconja。 - Mandeep Jain

感谢您的回复，Alconja - 您节省了我大量的时间！ - pixelworlds