w/jQuery上でドラッグしてCSSクラスを要素に追加する

Question

CSSクラスを特定の領域にドラッグしている間に要素に追加して、要素を削除した後にクラスを置き換えることはできますか？

私はこの機能をどこからでも探しているわけではなく、特定のエリアのみを探しています。

Answer 1

私が最初に考えたのは、クラスを変更したい領域のx、y座標、高さ、幅を集めることです。次に、オブジェクトがその境界内にあるときに、オブジェクトのx、y座標を取得できると仮定して、クラスを追加します。

Answer 2

確かに可能です。 jQuery UIには、これを行うための便利なオプションとイベントが用意されています。

ドラッグ可能な要素は、ドラッグされている間はいつでもクラス.ui-draggable-draggingによって参照できます。

droppableメソッドは、overと呼ばれるイベントを提供します。このイベントは、有効なドラッグ可能なオブジェクトがその上に乗っているときはいつでも関数を実行します。したがって、その関数の内部では、.ui-draggable-draggingを参照してクラスを追加することができます。

Outとdropイベントも提供されており、同様にドラッグ可能な要素をターゲットにできます。ここではそれがどのように見えるかです：

$("#droppable").droppable({ 
    // tolerance can be set to 'fit', 'intersect', 'pointer', or 'touch' 
    tolerance: 'intersect', 
    // Add .hoverClass whenever #draggable is being hovered over #droppable 
    over: function(event, ui) { 
     $('.ui-draggable-dragging').addClass('hoverClass'); 
    }, 
    // Remove .hoverClass whenever #draggable is no longer hovered over #droppable 
    out: function(event, ui) { 
     $('.ui-draggable-dragging').removeClass('hoverClass'); 
    }, 
    // Add .dropClass whenever #draggable is dropped on #droppable 
    drop: function(event, ui) { 
     $('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass'); 
    } 
}); 

上記のコードは#draggableが#droppableと交差するクラスを追加し、#draggableが#droppableへ落とされ、そのクラスが置き換えられます。さらに、2つの要素がもはや交差しない場合、.hoverClassが削除されます。ここにはworking example on jsfiddleがあります。

希望に役立ちます。

Answer 3

私はコールバックによって提供された準備されたUIオブジェクトを使用するのが面白いので、再度DOMクエリを作成する必要はありません。どんな小さなパフォーマンスの向上は... ...

over: function(e, ui) { 
    $(ui.helper[0]).addClass("success"); 
    } 

をドラッグ＆ドロップ& ;-) を使用する場合は特に

最高に良いです。