jQuery的可拖动 - 如果它被应用到两次的元素,会发生什么?(jQuery draggable

2019-07-18 01:22发布

直到最近,我有这个成立,这是所谓的多次:

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

destroy在那里停止多拖动处理堆积在类。 新元素被由AJAX创建,的初始附接draggable到类不接触随后创建的元素。

然而,当我更新到jQuery UI的1.9.2版本,它开始给我这个错误:

错误:不能调用方法拖动在初始化之前; 试图调用方法“破坏”

所以我删除了破坏线,它的甜味。 除非......我怀疑,我现在可以添加越来越多的处理程序类(这就是为什么destroy在那里摆在首位)。

我想这一点,但它不喜欢它:

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

两个问题:(1)是否有每个I火拖动设置了订单的时间连接到班级越来越多的处理程序? (2)如果是这样,任何解决方案如何删除它们?

Answer 1:

不,不会有额外的约束处理。 jQuery的初始化实例注册到元素,不会为同一个元素创建相同的窗口小部件的新实例。

至于你担心的处理程序,这里有一个快速检查(jQuery的1.8+和UI 1.9+):

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

小提琴

正如你所看到的,附加的处理程序对象是不是要在相同的元素初始化一个新的可拖动实例后改变。

编辑:后续调用与参数不会被忽视,虽然,而他们将扩展现有的小部件@Jason Sperske的回答,如图所示。



Answer 2:

后续调用.draggable()连接时,对同一个对象(而不是取代他们,因为我原本以为)延伸了先前的呼叫。 看到这个例子(从法布里西奥磨砂的扩展)( 演示 )

<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


文章来源: jQuery draggable - what happens if it is applied twice to an element?