jQuery ui droppable hoverClass activeClass答案

【问题标题】：jQuery ui droppable hoverClass activeClassjQuery ui droppable hoverClass activeClass
【发布时间】：2013-08-07 18:14:00
【问题描述】：

我有这个代码

$( "div.column_14_int" ).droppable({
  accept: "div.element-container",
  activeClass: "drop-cl",    
  hoverClass: "drag-over",
  tolerance: 'pointer',
  greedy: true,

    drop: function( event, ui ) {
   $(ui.draggable).appendTo( this );
    },

});

这很好，但是当开始拖动一个项目时，activeClass 被添加到 droppable 并工作。

当可拖动项超过droppable时，hoverClass被添加到droppable中，但它不起作用：droppable元素仍然具有activeClass颜色。

可拖动项目

<div class='element-container delete_el w4-4'>\
<div class='element-handler'>\
<a href='#edit-element' class='edit revs-edit-element'>Edit</a>\
<a href='#del' class='del-element'>X</a>\
</div><div class='element'>\
<span class='element-icon'>\
<img src='http://placehold.it/36x36&text=icon'></span>\
<span class='element-name'>Element name</span></div>\
<textarea rows='4' cols='20' class='text-shortcode'>[revs_flexslider page='home']    
</textarea>\
</div>"

可丢弃

 <div class='column_14 column_del column '><div class='top-bar'><div class='left
 controllers'><a href='#decr' class='decr'>-</a><span class='sz'>1/4</span><a    
 href='#incr' class='decr'>+</a></div><div class='del-column'><input type='button'  
 class='del' value='X'></div></div><div class='pb-element-container column_14_int 
 column_control connectedSortable'></div><textarea rows='4' cols='20' class='text-
 shortcode text-shortcode-col'>[rev-column whidt='14']</textarea></div>

但我不知道为什么你需要这个来回答

【问题讨论】：

能否包含您的 html？
刚刚包含但我不知道为什么你需要这个来回答

标签： jquery jquery-ui drag-and-drop droppable jquery-hover

【解决方案1】：

您可能应该做的第一件事是检查您的控制台，看看您的悬停和活动类是否实际添加到对象中。如果是，那么问题很可能与您的 CSS 特异性有关。

要修复，要么：

重新排列您的 CSS 声明，使 drop-cl 在拖动之前出现（假设它们具有相同的 CSS 特性），或者
通过添加 ids/classes/etc（或 !important）来更改拖拽的特殊性

这是一篇关于CSS Specificity的好文章

【讨论】：