如何刷新 jquery (ui) 中元素的事件

Question

有没有办法 "refresh" 应该应用于具有 jquery 的元素的事件？

为了更好地解释这里是我的案例。我有一个 document.ready() 函数，可以在两个列表上完成它的工作：

列表 A 包含 class a 的元素，列表 B 包含 class b.

的元素

我想让用户使用 draggable/droppable 元素从列表 A 移动到列表 B，但是它使用 .clone(true,true) 克隆元素到列表 B 和 classes 被替换为 .removeClass("a") 和 .addClass("b")。另一种方式 - 将 B 中的元素拖到列表 A 时从 B 中删除

上面解释的场景仅适用于页面加载时列表中任一列表中的元素，但是当我将对象从 A 克隆到 B 时，它仍然可以拖动，但它的行为与元素 A 一样，到在某种程度上，当尝试拖动它时，拖动阴影从列表 A 中的原始位置开始，而不是我在列表中实际开始拖动的位置。考虑到这一点，我需要找到一种方法 "refresh" 列表 B 中新克隆的元素表现得像列表 B 元素。

感谢您的支持。

Answer 1

A 从你的问题可以看出，你需要关闭某些元素的事件。为此，您可以使用 off() method 。

例如，请看下面的代码：

HTML

List A
<ul>
  <li class="draggable">item1</li>
  <li class="draggable">item2</li>
</ul>

List B
<ul class="droppable">

</ul>

JS

$('.draggable').draggable({
  helper: 'clone'
}).click(function() {
  alert($(this).text());
});


$('.droppable').droppable({
  drop: function(ev, ui) {
    // Add element with all events
    var dropElement = ui.draggable.clone(true, true);
    $(this).append(dropElement);

    // Add element without any events
    var dropElementWithoutEvents = ui.draggable.clone(true, true).off();       
    $(this).append(dropElementWithoutEvents);
  }
});

ui.draggable.clone(true, true).off() 删除您拖动的元素的所有事件并且 click 事件不会通过单击它来触发，但对于 dropElement，它会被触发。

Online demo (jsFiddle)

Answer 2

我已经通过另一个 draggable() 调用运行克隆的元素设法解决了这个问题。

在初始化时我有：

$( ".a" ).draggable({ 
    //...settings
});

$( ".b" ).draggable({ 
    //...settings
});

然后在完成所有操作后在 droppable 中，我将再次为 B 调用相同的 draggable：

 $("#B").droppable({
     accept: ".a",
     //...settings
     drop: function(event, ui) {
         var clone = $(ui.draggable).clone()
         clone.removeClass("a");
         clone.addClass("b");
         $("#B").append(clone);
         $(clone).draggable({ 
             //...sameSettings
         });
     }
 });

现在克隆的元素作为原生 B 元素使用，一切正常。

如何刷新 jquery (ui) 中元素的事件

how to refresh events on element in jquery (ui)

html

javascript

jquery

jquery-ui

jquery-ui-draggable