jquery-ui - jquery/jquery ui：找到每个跨度将类添加到被拖动的单个跨度

Question

我正在努力做到这一点，所以只有被拖动的跨度添加了一个类，到目前为止我有这个，但是它把类添加到所有跨度的......

$(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>

Answer 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');
   }
});

Answer 2

您不需要each()，只需 do $(this)，它指的是当前元素，它应该可以工作：

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

Answer 3

$(function() {

 $('span').draggable();

  $('#container, #board').droppable({
    tolerance : 'touch',
    over : function() {
       $(this).find('li span').addClass('over');
    },
    drop : function() {
       $(this).find('li span').removeClass('over');          
    }
   });
});

Answer 4

$('#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”