javascript - 在使用 jQuery 拖动时向元素添加 CSS 类

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 .

希望对您有所帮助。