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

你可以使用啓動事件來添加類到被拖動的元素。

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