jQuery 可拖动 - 如果将它应用于一个元素两次会发生什么？答案

【问题标题】：jQuery draggable - what happens if it is applied twice to an element?jQuery 可拖动 - 如果将它应用于一个元素两次会发生什么？
【发布时间】：2023-03-21 21:44:02
【问题描述】：

直到最近我才进行了多次调用：

                $('.rsh')
                    .draggable('destroy')                               
                    .draggable({ blah blah details });

destroy 用于阻止多个可拖动处理程序在类中累积。 AJAX 正在创建新元素，并且 draggable 到类的初始附件不会触及随后创建的元素。

但是，当我更新到 jQuery UI 1.9.2 版时，它开始给我这个错误：

错误：在初始化之前无法调用可拖动的方法；试图调用方法'destroy'

所以我删除了破坏线，它很甜蜜。除了......我怀疑我现在可能会在类中添加越来越多的处理程序（这就是为什么 destroy 首先出现在那里）。

我试过了，但它不喜欢它：

if ($('.rsh').length) {
    $('.rsh').draggable('destroy'); 
}

两个问题：（1）每次我触发可拖动设置行时，会不会有越来越多的处理程序附加到类？（2）如果是这样，任何关于如何删除它们的解决方案？

【问题讨论】：

标签： javascript jquery jquery-ui-draggable

【解决方案1】：

不，不会绑定额外的处理程序。 jQuery 将初始化的实例注册到元素，并且不会为同一个元素创建同一个小部件的新实例。

由于您担心处理程序，这里有一个快速检查（jQuery 1.8+ 和 UI 1.9+）：

$('div').draggable();
console.log( $._data($('div')[0], 'events') );
$('div').draggable();
console.log( $._data($('div')[0], 'events') );

Fiddle

如您所见，在尝试在同一元素上初始化新的可拖动实例后，附加的处理程序对象不会改变。

编辑：但不会忽略带有参数的后续调用，而是会扩展现有小部件，如@Jason Sperske 的回答所示。

【讨论】：

【解决方案2】：

当附加到同一个对象时，对.draggable() 的后续调用会扩展先前的调用（而不是像我最初想的那样替换它们）。请参阅此示例（扩展自 Fabrício Matté 的）(demo)

<div>foo</div>
<script>
 $('div').draggable({
  start: function () {
    console.log("drag 1");
  }
 });
 console.log($._data($('div')[0], 'events'));
 $('div').draggable({
  stop: function () {
    console.log("drag 2");
  }
 });
 console.log($._data($('div')[0], 'events'));
</script>

在console.log 中，您只能看到以下消息：

drag 1 <- on start
drag 2 <- on stop

【讨论】：

哦，太好了，我忘了考虑当前小部件的扩展。 +1 作为补充。