Question

是否可以在元素被拖动到特定区域时向元素添加CSS类，并在元素被删除后替换类？

我并不是在所有地方寻找这个功能，而只是在特定区域。

Answer 1

是的，这当然是可能的。 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。

希望有所帮助。

Answer 2

我觉得有趣的是使用回调提供的准备好的ui对象，所以你不必再做一个dom查询。每一个小的性能增益都很好，尤其是在使用drag＆amp; amp;下降;-) ...

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

...

最好的。

Answer 3

我们不需要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");
}

Answer 4

没试过，但我首先想到的是收集你希望它改变班级的区域的x，y坐标，高度和宽度。然后，假设您可以获取被拖动对象的x，y坐标，当对象在这些边界内时，添加类，当在外部删除类时。

在w / jQuery上拖动时，将CSS类添加到元素中

4 个答案: