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

使用jQueryUIDragables和Dropables时，如何在drop上更改拖放的元素？我试图将一个DIV拖到另一个可排序的DIV。在拖放时，我想更改被拖放DIV上的类并更改其内部HTML内容

在阅读了各种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>');
        }
    }
})

$（“.column”）.可拖放({
接受：'.element拖动'，
drop：函数（事件、用户界面）{
if（$（ui.draggable）.hasClass（“elemtxt”））{
$（ui.draggable）.replaceWith（'已添加此文本框！'）；
}
}
})

这对我不起作用-(

---

我的代码的完整副本位于。

从您提供的链接中获取完整的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");
});

$（函数（）{
$（“.elementbar div”）.draggable({
connectToSortable:“.column”，
光标：“移动”，
游标：{top:0，left:0}，
助手：“克隆”，
回复：“无效”
});
$（“.elementbar div，.elementbar div img”）.disableSelection（）；
$（“.column”）.sortable({
连接方式：'.column'，
光标：“移动”，
游标：{top:0，left:0}，
占位符：“ui可排序占位符”，
公差：“指针”，
停止：功能（事件、用户界面）{
if（ui.item.hasClass（“elemtxt”））{
ui.item.replaceWith（'已添加此文本框！'）；
}
}
});
$（“.element”）.addClass（“ui小部件ui小部件内容ui帮助程序clearfix ui角点全部”）；
});

有几个问题：

drop事件（您在问题中显示）没有触发，因为您没有

accept

ing正确的内容

如果您同时拥有

.sortable

和

.droppable

，则会触发奇怪的双重事件。无论如何，这是不必要的，因为您可以有效地从sortable的事件中抓取drop事件，因为您已经将其与draggable链接

---

另一件需要注意的事情是，最好使用可排序表的

receive

事件，而不是

stop

（因为每次将新项目放入排序列表时，任何排序停止和接收都会触发stop），但它无法正常工作，因为

项

尚未添加到可排序列表中，因此您无法在此时更改它。它在停止时正常工作，只是因为其他可排序项都没有

elemtxt

类。

我在“接收”事件中尝试了此操作，但失败了。感谢您提供的详细答案！谢谢同样-这值得两个答案的重复：-）我三个。两个小时来，我的头都碎了，找不到合适的解释。感谢@AlconjaThanks的回复Alconja-为我节省了很多时间！