jQuery Forum

Hi guys,

I'm currently trying to get a snap functionality working, but the item to be snapped to needs to change.

There will basically be 5 boxes, and a list of Products, the idea being that you drag a product from the list to box 1, then to box 2, then to box 3, etc.

I'm messing about with the example draggable from jqueryui.com to try and get this to work, and my method so far is, to have each list item have class "1", then on drop, I remove class 1 and add class 2.

Adding/removing classes is working, although, it doesn't change the snap focus. Is this because the items have already been given a target to snap to? 

Anything that anyone could suggest to get around this really would be appreciated. My code is posted below:

1.   $(function() {
       $("#draggable p").draggable({
         snap: '#droppable',
         snapMode: 'inner',
         helper: 'clone',
         revert: 'invalid' });
       $("#droppable").droppable({
         drop: function(event, ui) {
           $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
           $("#draggable p.1").removeClass('1').addClass('2');
           $("#draggable p.2").draggable({ snap: '.newSnap' });
         }
       });
   
     });

Thanks, Dan