5

JQuery UIのドロップ可能なライブラリ機能を使用していますが、ドロップ可能なターゲットにカーソルを合わせたときに、視覚的なユーザーフィードバックを提供したいと考えています。このため、このhoverClassオプションを使用して、ドラッグ可能なアイテムがホバーしているときに使用するクラスを簡単に指定できます。

しかし、私がやりたいのはhoverClass、いくつかのロジックに応じて異なる値を使用することです。基本的に、「ドロップ可能」な領域がいくつかあり、ドラッグアンドドロップできるアイテムもいくつかありますが、すべての領域にすべてのアイテムをドロップできるわけではありません。たとえば、ドロップが有効な場合は背景を緑色にし、ドロップが無効な場合は背景を赤色にします。

これはどのように行うことができますか？使用したいロジックはわかっていますが、どこにロジックを追加できますか。明らかに、ドラッグされている要素と潜在的なドロップターゲット要素にアクセスできる場所にある必要があります。

これまでの私の簡単なコードは次のとおりです。

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

$(".DropItem").droppable({
    tolerance: "touch",
    hoverClass: "DropTargetValid"
});
4

4 に答える 4

3 
$(".DropItem").droppable({
    tolerance: "touch",
    hoverClass: "DropTargetValid",
    over: function(event, ui) {
       console.log(ui.draggable); // the draggable object
       console.log($(this)); // the droppable object
    }
});

これでうまくいくはずです。そのイベントを超えると、すべての .DropItem 要素でトリガーされます。利用可能なイベント API の詳細については、http: //api.jqueryui.com/droppable/を参照してください。

于 2013-03-05T14:14:11.540 に答える
2

droppableにjQuerydroppableAPI #overと呼ばれる独自のホバーイベントがある場合、あなたの問題はクラス自体でそれを行おうとしていると思いますover

だからあなたは欲しいでしょう：

$(".DropItem").droppable({
    tolerance: "touch",
    over: function(event, ui) {
        // ... logic goes here
    }
});
于 2013-03-05T14:18:38.367 に答える
2

他の答えはまさに私が探していたものです。ただし、ロジックを処理する方法のより良い例を示すために、ここでもう少し詳しく説明したいと思います。

たとえば、次のような単純な HTML があるとします。この HTML には、基本的に 4 つのドラッグ可能なオブジェクトと、4 つの可能なドロップ ターゲットがあります。

<div style="margin-bottom:20px;">
    <div data-id="1" class="DragItem">I am 1</div>
    <div data-id="2" class="DragItem">I am 2</div>
    <div data-id="3" class="DragItem">I am 3</div>
    <div data-id="4" class="DragItem">I am 4</div>
</div>
<div>
    <div data-id="123" class="DropItem">I accept 1, 2 and 3</div>
    <div data-id="23" class="DropItem">I accept 2 and 3</div>
    <div data-id="34" class="DropItem">I accept 3 and 4</div>
    <div data-id="1234" class="DropItem">I accept all</div>
</div>

ご覧のとおり、data-*属性を使用して特定の識別値を格納しました。DragItem の ID はドラッグ オブジェクトを識別し、DropItem の ID にはすべての有効な値が含まれます。

このロジックを処理し、正しいクラスを適用する JavaScript は次のとおりです。

$(".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");
    }
});

ご覧のとおり、単純な「文字列に含まれているか」のロジック チェックを行っています。これは少数の場合は問題ありませんが、9 つ以上のオブジェクトを実行する必要がある場合は、DropItemdata-id値により信頼性の高い文字列が必要になります。

また、outおよびdeactivateイベントを使用して、適用されたクラスをクリアします。この例ではコードを複製していますが、これは両方のイベントで使用される単一の関数に簡単に置き換えることができます。

最後に、皆さんが待ち望んでいた瞬間、ここに実用的な例があります。

于 2013-03-05T14:46:36.280 に答える
0

Draggable Start/Stop イベントを使用して、クラスをドロップゾーンに追加および削除します。

http://api.jqueryui.com/draggable/#event-start

于 2013-03-18T21:19:41.987 に答える