13

ui ドラッグ可能 ( http://jqueryui.com/demos/droppable/#revert ) では、ある div 内にあり、別の div 内にない場合、div を元に戻すことができますか? たとえば、このように

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" });

しかし、それは明らかな理由で機能しません..しかし、それを条件付けることはできますか?..いつ、そのドロップ可能の内部ではなく、このドロップ可能の内部にあるのですか?

4

1 に答える 1

35

あなたの考えは正しかったです。小さなボックスを貪欲なドロップ可能dropにして、それらのイベントを処理する必要があります。トリッキーな部分は、ドラッグ操作をキャンセルすることです。

デフォルトでは、ドラッグ可能なものは として開始する必要がありますrevert:'invalid'。私の例では を使用している大きなボックス内にそれらがドラッグされている場合、何もする必要はtolerance:'fit'ありません。そのため、小さなボックスが受け入れられるには完全に内側にある必要があります。

私は小箱を貪欲なドロップ可能に で作ったtolerance:'touch'ので、ドラッグされた小箱が別の小箱に触れると、そのdragハンドラーが呼び出されます。

ドラッグ ハンドラーからのドラッグ操作をキャンセルするには、ドラッグされたアイテムを に設定するという回避策を実行できますrevert:true。その小さなボックスを再びドラッグできるようにするには、そのドラッグ停止イベントで をリセットする必要がありますrevert:'invalid'。このstopイベントは、ドロップが成功するたびに発生し、元に戻す場合は、元に戻すが完了した後に発生します。

ここでライブデモを試すことができます: http://jsfiddle.net/htWV3/1/

HTML:

<div class="drop">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

CSS:

.drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }

.drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; }

Javascript:

$('.drop').droppable({
    tolerance: 'fit'
});

$('.drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

$('.drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});
于 2011-05-22T12:29:31.050 に答える