jQuery ui droppable hoverClass activeClass -
i have code
$( "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( ); }, });
that works fine, when start dragging item, activeclass added droppable , work.
when draggable item on droppable hoverclass added droppable, doesn't work: droppable element still has activeclass color.
draggable item
<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>"
droppable
<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>
but dont know why u need thi answer
first thing should check console see if hover , active classes added object. if are, problem css specificity.
to fix, either:
- rearrange css declarations such drop-cl comes before drag-over (assuming have same css specificity), or
- change specificity of drag-over adding ids/classes/etc (or !important)
here's nice article on css specificity
Comments
Post a Comment