Question

I’m trying to make it so only the span that is being dragged has a class added, so far I have this but but it adds the class to all span’s …

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

      }
   });
});

Here’s the he HTML (if that helps)

<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

you can use the start event to add the class to the element being dragged.

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

and to remove it again when no longer dragged simply add a handler to the stop event as well

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