使用jQuery UI拖放:在拖放中更改拖放元素

When using jQuery UI draggables and droppables, how do you change the dragged-and-dropped element on drop? I am trying to drag one DIV to another sortable DIV. On drop, I'd like to change the classes on the dropped DIV and change its innerHTML content.

在使用jQuery UI拖放和可拖放时，如何更改拖放元素?我试图将一个DIV拖到另一个可排序的DIV。

After reading various * questions, my code looks like this:

在阅读了各种*问题后，我的代码是这样的:

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

It's not working for me. :-(

这对我没用。:-(

A full copy of my code is located at http://www.marteki.com/jquery/bugkilling.php.

我的代码的完整副本位于http://www.marteki.com/jquery/bugkilling.php。

1 个解决方案

#1

Taking the full javascript code from the link you gave, you can change it as follows to make it work:

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

There were a couple of issues:

有几个问题:

The drop event (that you show in your question) wasn't firing because you weren't accepting the right content.
删除事件(您在问题中显示的)没有被删除，因为您没有接受正确的内容。
If you have both .sortable & .droppable you end up with weird double events firing. This is unnecessary anyway, since you can effectively grab the drop event from sortable's events given that you've linked it with the draggable.
如果你同时拥有。sortable和。droppable，你将以奇怪的双事件触发而告终。这是不必要的，因为您可以有效地从sortable的事件中获取drop事件，因为您已经将它与draggable链接在一起。

One other thing to note - it would have been nicer to use the sortable's receive event instead of stop (since stop gets fired every time any sorting stops & receive is specifically there to fire when you drop a new item into the sort list), but it doesn't work properly because the item hasn't yet been added to the sortable list, so you aren't able to change it at that point. It works ok on stop simply because none of the other sortable items have the elemtxt class.

另一个需要注意的——它将是更好的使用合适的接收的事件而不是停止(因为每次停止被解雇任何排序停止&收到特别火当你下一种新的条目列表中),但是它不能正常工作,因为物品还没有被添加到可排序的列表,所以你不能够改变它。它可以在stop中正常工作，因为其他的sortable项没有一个类。

#1