在拖动w / jQuery时向元素添加CSS类 [英] Add CSS class to an element while dragging over w/ jQuery
问题描述
是否可以在元素被拖曳到特定区域时向元素添加CSS类,并在元素被删除后替换该类?
是的,这当然是可能的。 jQuery UI提供了一些方便的选项和事件来做到这一点。
对于初学者,draggable元素总是可以由类 .ui-
droppable
方法然后提供一个事件调用 over
,当有效的可拖动对象悬停在其上时,它将执行一个函数。所以,在这个函数中,我们可以参考 .ui-draggable-dragging
并添加一个类。
还提供了 Out
和 drop
事件,我们可以以同样的方式定位draggable元素。下面是它的外观:
$(#droppable)。droppable({
// tolerance设置为'fit','intersect','pointer'或'touch'
tolerance:'intersect',
//添加.hoverClass #draggable被悬停在#droppable
:remove();
};
//删除.hoverClass每当#draggable不再徘徊在#droppable
out:function(event,ui){
$('。ui-draggable-dragging')。removeClass('hoverClass');
},
//当#draggable放在#droppable上时添加.dropClass
drop:function(event,ui){
$('。ui-draggable-dragging')。removeClass('hoverClass' ).addClass('dropClass');
}
});
上述代码在 #draggable
与 #droppable
相交,然后将 #draggable
替换为# droppable
。另外,当两个元素不再相交时, .hoverClass
被删除。这是 jsfiddle的工作示例。
希望有帮助。 p>
Is it possible to add a CSS class to an element while it is being dragged over a particular area and replace the class once the element is dropped?
I am not looking for this feature everywhere, but only over a particular area.
Yep, it's certainly possible. jQuery UI provides some handy options and events to do this.
For starters, the draggable element can always be referred to by the class .ui-draggable-dragging
while it's being dragged.
The droppable
method then provides an event called over
which will execute a function whenever a valid draggable object is hovered over it. So, inside that function we can refer to .ui-draggable-dragging
and add a class to it.
Out
and drop
events are also offered and we can target the draggable element the same way. Here's how it would look:
$("#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');
}
});
The above code adds a class when #draggable
intersects with #droppable
and then replaces that class when #draggable
is dropped on to #droppable
. Additionally, .hoverClass
is removed when the two elements no longer intersect. Here is a working example on jsfiddle.
Hope that helps.
这篇关于在拖动w / jQuery时向元素添加CSS类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!