3

私はこのコードを試しています: jsfiddle強調表示され、ボックスをドロップできるボックスが通知されますが、ドロップ可能なものは受け入れられません。元に戻すのではなく、ドロップ可能を受け入れるようにこのコードを変更する方法を知っている人はいますか?

$(".DragItem").draggable({
    revert: true,
    helper: "clone" 
});

$(".DropItem").droppable({
    tolerance: "touch",
    over: function (event, ui) {
        var dropItem = $(this);
        var dragItem = $(ui.draggable);
        var valid = String(dropItem.data("id")).indexOf(dragItem.data("id")) > -1;
        if (valid) {
            dropItem.addClass("DropTargetValid");
        } else {
            dropItem.addClass("DropTargetInvalid");
        }
    },
    out: function (event, ui) {
        var dropItem = $(this);
        dropItem.removeClass("DropTargetValid");
        dropItem.removeClass("DropTargetInvalid");
    },
    deactivate: function (event, ui) {
        var dropItem = $(this);
        dropItem.removeClass("DropTargetValid");
        dropItem.removeClass("DropTargetInvalid");
    } 
});
4

2 に答える 2

1

clones () を正しい div に追加し、それらが一致しない場合は元に戻す必要があります。最初にaccept:すべてのドラッグ可能な要素を削除してから、drop:セクションで元に戻す処理を行います。また、複製してドラッグする要素の元の位置を作成して保存し、要素を元の位置に戻してからページから削除できるようにする必要があります。

最終的なスクリプトのデモは次のとおりです。

JSnippet デモ ドラッグ＆ドロップ可能

楽しんで！

于 2013-07-22T21:35:09.543 に答える