在w/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与where相交时添加一个类#droppable,然后在#draggable删除时替换该类#droppable.另外,.hoverClass当两个元素不再相交时被移除.这是一个关于jsfiddle的工作示例.

希望有所帮助.

Answer 2

还没有尝试过，但我的第一个想法是收集你想要改变类的区域的 x,y 坐标、高度、宽度。然后，假设您可以获得被拖动对象的 x,y 坐标，当对象在这些边界内时，添加类，当在这些边界之外时删除类。