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()，只需执行$(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”

jquery / jquery ui：找到每个span添加类到拖动的单跨

4 个答案: