jquery - クローンで失われた JQuery ドロップ可能

Question

ドロップ可能な JQuery オブジェクトを複製する必要があるアプリケーションに取り組んでいます。

不要なコードを取り除いた簡単なデモは次のとおりです。

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

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

http://jsfiddle.net/tGg9Y/

---

私は .clone(true) を使用しましたが、クリックなどの他のイベント ハンドラーは引き続き機能しますが、ドロップ可能なものは失われます。

次を使用して、ドロップ可能なものを直接リセットしようとしました：

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

これを機能させる方法を知っている人はいますか？

Answer 1

のディープ コピーを実行せずにelement、ドロップ可能なプラグインを再適用すると、動作するはずです。

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

プラグインが適用された要素をコピーすることは、プラグインが設計およびコーディングされた方法で同じプラグイン インスタンスを使用して複数の DOM 要素をサポートできることを 100% 確信していない限り、あまり安全ではないと思います。

問題になる可能性がある理由の 1 つを示すjsFiddleを作成しましたが、他にも多くの理由がある可能性があります。

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);

Answer 2

コードをこれに変更するだけです、FIDDLE

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