12

JQuery 1.5.1 と JQuery UI 1.8.11 を使用しています。

いくつかのアイテムにソート可能を追加しました-ここでのタスクは、ドラッグしてソートできるようにすることです。これはすべて正常に機能します。

しかし、アイテムを「コピーミー」エリアにドロップできるように、ドロップ可能も組み込みたいです-アイテムを複製するタスクがあります（後で少し作業します）

問題は、ドロップ可能なターゲットがソート可能なリストの一番下にあり(これを移動したくない)、ドロップが発生すると、ソート可能なアイテムがリストの一番下に移動することです。

私がやりたいのは、ドロップ イベントが発生したときにこの並べ替えをキャンセルすることです。

ここで私の問題を実際に見ることができます(「アイテム 1」を「アイテムをコピーする」領域にドラッグするだけで、並べ替えがキャンセルされないことがわかります)

ご覧のとおり、ドロップ可能な「ドロップ」イベント（JQuery UI Docsから提案）で次のことを試しましたが、うまくいかないようです...

$(this).sortable('cancel');

また、私が探しているこの「ドロップしてコピー」効果を達成する方法に関する他の推奨事項も受け入れます。

ありがとう

4

1 に答える 1

4

OK、私は仕事をする解決策を考え出しました。

ソート可能な関数の「停止」イベントにキャンセルコードがある場合、キャンセルコードは機能します。ただし、「元に戻す」が完了すると適用されます。問題は、ドロップ可能な「ドロップ」イベントから要素をコピー/元に戻そうとしたことですが、これは早すぎました。

解決策は、「停止」イベントが完了するのを待つことです。これを達成するには、「停止」イベントでチェックされる「コピー待ち」フラグを作成する必要がありました。

ここに例があります

まだ (UX の観点から) 適切ではありませんが、正常に動作します。また、sortable 関数でいつでも revert を false に設定して、わずかに改善することができます。

例のコードは次のとおりです...

var itemCount = 3;
var awaitingCopy = false;

$(init);

function init() {
    $("#Items").sortable({
        revert: true,
        placeholder: "ItemPlaceHolder",
        opacity: 0.6,
        start: StartDrag,
        stop: StopDrag
    });

    $("#CopyItem").droppable({
        hoverClass: "CopyItemActive",
        drop: function(event, ui) {
            awaitingCopy = true;
        }
    });

    $("#NewItem").click(function(e) {
        e.preventDefault();
        itemCount++;
        var element = $("<div class='Item'>Item " + itemCount + "</div>");
        $("#Items").append(element);
        element.hide().slideDown(500);
    });
}

function CopyItem(element) {
    awaitingCopy = false;
    var clone = element.clone();
    $("#Items").append(clone);
    clone.hide().slideDown(500);
}

function StartDrag() {
    $("#NewItem").hide();
    $("#CopyItem").show();
}

function StopDrag(event, ui) {
    if (awaitingCopy) {
        $(this).sortable('cancel');
        CopyItem($(ui.item));
    }
    $("#NewItem").show();
    $("#CopyItem").hide();
}

とにかく、うまくいけば、これは同じ種類の効果を望む他の人を助けるでしょう...私のデザインを盗むことはありません;）

于 2011-10-20T13:19:15.920 に答える