jQuery：ヘルパーが正常にドロップされなかった場合、ヘルパーが削除されないようにする方法

Question

ドラッグ可能 とカスタム helper 。時にはヘルパーはクローンであり、時には元の要素です。

問題は、ヘルパーが元の要素であり、有効なドロップ可能オブジェクトにドロップされない場合、ヘルパーが削除されることです。これまでのところ、私の解決策は次のようになっています。

on_dropped コールバックで ui.helper.dropped_on_droppable を true に設定します;

ドラッグ可能の stop コールバックで、その変数を確認してから...どうすればよいですか？

$('.my_draggable').draggable({
    stop   : function(e, ui) {
        if (!ui.helper.dropped_on_droppable) {
            /* what do I do here? */
        }
    },

これは正しいアプローチですか？

Answer 1

わかりました、解決策を見つけました！それはugく、「カプセル化のルール」を破りますが、少なくとも仕事はします。

これは特別な場合にのみ覚えておいてください！ jQueryは独自のヘルパー削除をうまく処理できます。私の場合、元の要素とクローンのヘルパーがあったため、元に戻した後にヘルパーを削除することは必ずしも適切ではありませんでした。

element.draggable({
    stop   : function(e, ui) {
        /* "dropped_on_droppable" is custom and set in my custom drop method
           ".moved_draggable" is custom and set in my custom drag method, 
                     to differentiate between the two types of draggables
        */               
        if (!ui.helper.dropped_on_droppable & ui.helper.hasClass('moved_draggable')) {
            /* this is the big hack that breaks encapsulation */
            $.ui.ddmanager.current.cancelHelperRemoval = true;
        }
    },

警告：これはカプセル化を破壊し、前方互換性がない場合があります

Answer 2

ここで何かが足りないかもしれませんが、単に追加する場合ではありません

revert: "invalid"

ドラッグ可能がクローンではなく元の要素の場合、ドラッグ可能のオプションへ

Answer 3

複数選択のドラッグ可能物を1つのdivに集約するカスタムヘルパーを使用します。これは、元に戻す機能を備えていないようですので、このスキームを思いつきました。要素は、.data（）で追跡する元の親に手動で追加されます。

.draggable({
    helper: function() {
        var div = $(document.createElement('div'))
            .data('lastParent', $(this).parent());
        return div;
    },
    start: function() {
        //... add multiple selection items to the helper..          
    },
    stop: function(event,ui) {
        $( $(ui.helper).data('lastParent') ).append( $(ui.helper).children() );
    }
}

このアプローチはきれいなアニメーションを失いますが、この問題を抱えているあなたや他の人にとっては役に立つかもしれません。