Javascript 在使用 jQuery 拖动时将 CSS 类添加到元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7206622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add CSS class to an element while dragging over w/ jQuery
提问by santa
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?
是否可以在元素被拖动到特定区域时向元素添加 CSS 类，并在元素被删除后替换该类？
I am not looking for this feature everywhere, but only over a particular area.
我不是到处都在寻找此功能，而只是在特定区域内寻找。
回答by Colin Brock
Yep, it's certainly possible. jQuery UI provides some handy options and events to do this.
是的，这当然是可能的。jQuery UI 提供了一些方便的选项和事件来执行此操作。
For starters, the draggable element can always be referred to by the class .ui-draggable-draggingwhile it's being dragged.
对于初学者来说，可拖动元素在被拖动时始终可以被类引用.ui-draggable-dragging。
The droppablemethod then provides an event called overwhich will execute a function whenever a valid draggable object is hovered over it. So, inside that function we can refer to .ui-draggable-draggingand add a class to it.
droppable然后，该方法提供一个被调用的事件over，只要有效的可拖动对象悬停在它上面，该事件就会执行一个函数。因此，在该函数中，我们可以引用并向.ui-draggable-dragging其添加一个类。
Outand dropevents are also offered and we can target the draggable element the same way. Here's how it would look:
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');
}
});
The above code adds a class when #draggableintersects with #droppableand then replaces that class when #draggableis dropped on to #droppable. Additionally, .hoverClassis removed when the two elements no longer intersect. Here is a working example on jsfiddle.
上面的代码添加一个类时，#draggable与相交#droppable并替换当这个类#draggable上被丢弃#droppable。此外，.hoverClass当两个元素不再相交时被移除。这是一个关于 jsfiddle的工作示例。
Hope that helps.
希望有帮助。
回答by user1624605
i found interesting to use the prepared ui object provided by the callback so u dont have to make a dom query again. every little performance gain is good especially when using drag & drop ;-) ...
我发现使用回调提供的准备好的 ui 对象很有趣，因此您不必再次进行 dom 查询。每一点性能提升都很好，尤其是在使用拖放时；-) ...
over: function(e, ui) {
$(ui.helper[0]).addClass("success");
}
...
...
best.
最好的事物。
回答by Srinivasan Sekar
We don't need jQuery UI. With jquery / javascript we can add remove classes.
我们不需要 jQuery UI。使用 jquery / javascript 我们可以添加删除类。
I'll show how we can do it in JS.
我将展示我们如何在 JS 中做到这一点。
Consider below html,
考虑下面的html，
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
upon dragstart ,
在拖动开始时，
function drag(ev) {
ev.dataTransfer.setData("id", ev.target.id);
}
upon dragenter,
在 Dragenter 上，
function dragEnter(event) {
var id= ev.dataTransfer.getData("id");
document.getElementById(id).classList.add("mycalss");
}
upon drop,
在下降时，
function drop(ev) {
ev.preventDefault();
var id= ev.dataTransfer.getData("id");
document.getElementById(id).classList.remove("mycalss");
document.getElementById(id).classList.add("replacedclass");
}
回答by ckimbrell
Haven't tried it, but the first thought I have is to gather the x,y coordinates, height, width of the area you want it to change the class over. Then, assuming you can get the x,y coords of the object being dragged, when the object is within those bounds, add class, when outside remove class.
还没有尝试过，但我的第一个想法是收集您希望它改变类的区域的 x、y 坐标、高度、宽度。然后，假设您可以获得被拖动对象的 x,y 坐标，当对象在这些边界内时，添加类，在外部删除类时。
