是否可以在元素被拖动到特定区域时为其添加 CSS 类，并在元素被拖放后替换该类？
我并不是在到处寻找这个功能，而只是在一个特定的区域。
【问题讨论】：
标签： javascript jquery css
是的，这当然是可能的。 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。
希望对您有所帮助。
【讨论】：
我发现使用回调提供的准备好的 ui 对象很有趣，因此您不必再次进行 dom 查询。每一点性能提升都是好的，尤其是在使用拖放时；-) ...
over: function(e, ui) {
$(ui.helper[0]).addClass("success");
}
...
最好的。
【讨论】：
我们不需要 jQuery UI。使用 jquery / javascript 我们可以添加删除类。
我将展示我们如何在 JS 中做到这一点。
考虑下面的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">
在拖动开始时，
function drag(ev) {
ev.dataTransfer.setData("id", ev.target.id);
}
在拖动时，
function dragEnter(event) {
var id= ev.dataTransfer.getData("id");
document.getElementById(id).classList.add("mycalss");
}
掉落时，
function drop(ev) {
ev.preventDefault();
var id= ev.dataTransfer.getData("id");
document.getElementById(id).classList.remove("mycalss");
document.getElementById(id).classList.add("replacedclass");
}
【讨论】：
没有尝试过，但我首先想到的是收集您希望它更改类的区域的 x,y 坐标、高度、宽度。然后，假设您可以获得被拖动对象的 x,y 坐标，当对象在这些范围内时，添加类，当在删除类之外。
【讨论】：