0

ドラッグされているスパンだけにクラスが追加されるようにしようとしていますが、これまでのところこれがありますが、すべてのスパンにクラスが追加されます...

$(function() {

 $('span').draggable();

  $('#container, #board').droppable({
    tolerance : 'touch',
         over : function() {

    $('li').each(function() {
     $(this).find('span').addClass('over');
    });             

},
    drop : function() {
    $('li').each(function() {
     $(this).find('span').removeClass('over');          
}); 

      }
   });
});

これが彼のHTMLです（それが役立つ場合）

<div id="container">
 <div id="board">
  <ul>
   <li class="foo1"><span class="p1"></span></li>
   <li class="foo2"><span class="p1"></span></li>
   <li class="foo1"><span class="p1"></span></li>
   <li class="foo2"><span class="p1"></span></li>
  </ul>
 </div>
</div>
4

4 に答える 4

1

start イベントを使用して、ドラッグ中の要素にクラスを追加できます。

$('span').draggable({
   start: function(event, ui) {
      $(event.target).addClass('over');
   }
});

ドラッグされなくなったときに再び削除するには、停止イベントにもハンドラーを追加するだけです

$('span').draggable({
   start: function(event, ui) {
      $(event.target).addClass('over');
   },
   stop: function(event, ui) {
      $(event.target).removeClass('over');
   }
});
于 2012-05-30T06:25:59.687 に答える
0 
$('#container, #board').droppable({
    tolerance : 'touch',
         over : function(e, elem) { // Params
                // here is the original element we move
                $(elem.draggable).find('span').addClass("over"); 


},
    drop : function(e, elem) {
              // 
              $(elem.draggable).find('span').removeClass('over');

ただし、ドラッグ中に元の Dom を使用しない場合 (つまり、{helper: "clone" })、elem.draggable はヘルパーに影響しません。それはあなたの.draggableコードをここに書いてください...そしてまたあなたは "elem.helper"を試すことができます

于 2012-05-30T06:10:55.627 に答える
0

は必要ありません。現在の要素を参照するだけで動作しますeach()。$(this)

over : function() {
    $(this).find('span').addClass('over');
}
于 2012-05-30T06:05:38.410 に答える
0 
$(function() {

 $('span').draggable();

  $('#container, #board').droppable({
    tolerance : 'touch',
    over : function() {
       $(this).find('li span').addClass('over');
    },
    drop : function() {
       $(this).find('li span').removeClass('over');          
    }
   });
});
于 2012-05-30T06:06:27.767 に答える