使用jQuery UI拖放：在拖放时更改拖动的元素 [英] Using jQuery UI drag-and-drop: changing the dragged element on drop

问题描述

使用jQuery UI draggables和droppables时，如何更改拖放的元素？我试图将一个DIV拖到另一个可排序的DIV。放弃，我想更改删除的DIV上的类并更改其innerHTML内容。

在阅读各种StackOverflow问题后，我的代码如下所示： p>

  $（。column）。droppable（{
 accept：'.element-dragging'，
 drop：function（event，ui）{
 if（$（ui.draggable）.hasClass（elemtxt））{
 $（ui.draggable）.replaceWith（'< div class =元素元素txt>此文本框已添加！< / div>'）; 
} 
} 
}）
  / pre> 
 
 
对我来说不行： - （
 
 
 
我的代码的完整副本位于 http://www.marteki.com/jquery/bugkilling.php 。
解决方案
您提供的链接的完整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>此文本框已添加！< / div> ）; 
} 
} 
}）; 
 $（。element）。addClass（ui-widget ui-widget-content ui-helper-clearfix ui-corner-all）; 
}）; 
  
有几个问题：
 
 
在你的问题中显示的删除事件没有被触发，因为你不是接受正确的内容。
 
 
如果您同时拥有 .sortable &  .droppable 你最终会发生奇怪的双重事件。这是不必要的，因为您可以有效地从可排序的事件中抓取事件，因为您已经将其与可拖动链接。
 
 
另外要注意的是，使用排序的收到事件而不是停止（因为停止得到当您将新项目放入排序列表时，每次任何排序停止和接收都将被点亮），但是由于项目 hasn尚未添加到可排序列表，因此您无法在此时更改它。它停止工作，因为没有其他可排序的项目有 elemtxt 类。
 
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.

After reading various StackOverflow 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.
解决方案
Taking the full javascript code from the link you gave, you can change it as follows to make it work:
$(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.
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.

                        
这篇关于使用jQuery UI拖放：在拖放时更改拖动的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！