是否可以在元素被拖动到特定区域时向元素添加CSS类,并在元素被删除后替换类?
我并不是在所有地方寻找这个功能,而只是在特定区域。
答案 0 :(得分:22)
对于初学者来说,可拖动的元素在被拖动时始终可以被类.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。
希望有所帮助。
答案 1 :(得分:3)
我觉得有趣的是使用回调提供的准备好的ui对象,所以你不必再做一个dom查询。每一个小的性能增益都很好,尤其是在使用drag& amp;下降;-) ...
over: function(e, ui) {
$(ui.helper[0]).addClass("success");
}
...
最好的。
答案 2 :(得分:0)
我们不需要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">
在dragstart上,
function drag(ev) {
ev.dataTransfer.setData("id", ev.target.id);
}
在Dragenter上,
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");
}
答案 3 :(得分:-2)
没试过,但我首先想到的是收集你希望它改变班级的区域的x,y坐标,高度和宽度。然后,假设您可以获取被拖动对象的x,y坐标,当对象在这些边界内时,添加类,当在外部删除类时。