0

私はこのコードを持っています

$( "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 に追加されて機能します。

ドラッグ可能なアイテムがドロップ可能な hoverClass の上にある場合、ドロップ可能な要素に hoverClass が追加されますが、機能しません: ドロップ可能な要素にはまだ 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>

しかし、私はあなたが答えのためにこれを必要とする理由を知りません

4

1 に答える 1

0

おそらく最初に行うべきことは、コンソールをチェックして、ホバー クラスとアクティブ クラスが実際にオブジェクトに追加されているかどうかを確認することです。そうである場合、問題は CSS の特異性に関係している可能性が最も高いです。

修正するには、次のいずれかを行います。

  1. drop-cl が drag-over の前に来るように CSS 宣言を再配置します (CSS の仕様が同じであると仮定します)。
  2. ids/classes/etc (または !important) を追加して、ドラッグオーバーの特異性を変更します

これはCSSの特異性に関する素晴らしい記事です

于 2014-03-27T10:46:34.843 に答える