在拖拽w/jQuery的同時將CSS類添加到元素

可以在元素被拖動到特定區域時將CSS類添加到元素並在元素被刪除後替換該類？在拖拽w/jQuery的同時將CSS類添加到元素

我不是在隨處找這個功能，而只是在特定的區域。

來源

2011-08-26 santa

結束時添加類，刪除並添加新類時被刪除？ –

您是否使用jQuery UI庫（可拖動/可拖放的交互）？ –

是的，我使用拖放jQuery UI。 – santa

-2

還沒有嘗試過，但我首先想到的是收集您希望它改變類的區域的x，y座標，高度，寬度。然後，假設你可以得到被拖動的對象的x，y座標，當對象位於這些邊界內時，可以在外部刪除類時添加class。

來源

2011-08-26 15:14:04 ckimbrell

如果我的區域已經分配了類，該怎麼辦？ – santa

爲什麼所有這些工作時有一個jQuery插件來做到這一點？ OP確實提到了jQuery ... –

是的，這當然有可能。 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該類。此外，當兩個元素不再相交時，將刪除.hoverClass。這是一個working example on jsfiddle。

希望有所幫助。

來源

2011-08-26 16:07:51

很好的答案。 mootools/jQuery的拖放功能勝過了HTML5拖放功能中的所有功能，甚至不值得搞亂HTML5的實現。 –

沒有jquery ui的解決方案是什麼？ –

我發現使用準備好的回調提供的ui對象很有趣，所以你不必再做一個dom查詢。通過拖放&下降;-) ...

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

...

最佳尤其是當每個小的性能提升還是不錯的。

來源

2012-08-29 12:27:35 user1624605

非常有趣，謝謝。 – santa

在拖拽w/jQuery的同時將CSS類添加到元素

回答

相關問題