jQuery droppable在克隆上丢失

问题描述

我正在开发一个需要我克隆可放置的JQuery对象的应用程序.

I am working on an application that requires me to clone a JQuery object that is droppable.

一个快速演示，其中去除了不必要的代码:

A quick demo with unnecessary code stripped out is:

var $droppable = $("#droppable");
$droppable.droppable({
    accept : "#draggable",
    hoverClass : "thickBorder",
    drop : function () {
        alert("thanks");
    }
});

var $cloned = $droppable.clone(true);

http://jsfiddle.net/tGg9Y/

我使用了.clone(true)，其他事件处理程序(如click)继续工作，但是droppable丢失了.

I have used .clone(true), and other event handlers like click continue to work, but the droppable is lost.

我什至尝试使用以下方法直接重置Droppable:

I even tried to directly reset the droppable using:

$cloned.droppable($droppable.droppable('option'));

有人知道如何使它正常工作吗?

Does anyone know how to get this to work?

推荐答案

如果您没有对element进行深层复制，而是在其上重新应用了droppable插件，则它应该可以工作.

If you don't perform a deep copy of the element, and you reapply the droppable plugin on it, it should work.

var $cloned = $droppable.clone(false);

我认为复制应用了插件的元素并不是很安全，除非您100％确定插件的设计和编码方式可以使用同一插件实例支持多个DOM元素.

I think it is not very safe to copy an element that has a plugin applied to it, unless you are 100% sure that the way the plugin was designed and coded could support multiple DOM elements using the same plugin instance.

我创建了一个 jsFiddle ，以说明可能是问题的一个原因，但可能有一个原因还有很多.

I have created a jsFiddle that demonstrate one reason it could be an issue, but there could be many others.

HTML

<div id="initial">Initial</div>

JS

function SomePlugin(el) {
    var $el = this.$el = $(el);

    $el.mouseenter(function () {
            //works for this handler because we did not use a closure variable
            $(this).css({ backgroundColor: 'red'});
        })
        .mouseleave(function () {
            //won't work for this one because because we are referencing $el
            //wich will always point to the other element
            $el.css({ backgroundColor: 'white'});
        });
}

//instanciate plugin
var $initial = $('#initial'), $clone;
new SomePlugin($initial);

$clone = $initial.clone(true).html('clone').attr('id', 'clone').appendTo(document.body);

这篇关于jQuery droppable在克隆上丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！