jQuery 1 draggable list & 2 sortable destination lists - bugs...

Question

Hi,

I have a list (List1) which I can drag boxes from, and two lists where I can drag List1 boxes to (List2 & List3).

I have 'sortable' code for List2 & List3 which reformats what I've dragged from List1 (eg. it changes the colour of the box etc using the 'receive:' function. Say List2 boxes turn blue & List3 boxes turn red). The code also gives each box a unique id based on the total number of boxes in Lists 2 & 3. So if 2 boxes exist in List2 & 1 box in List3, then the next box dragged to either of these lists becomes 'box4'.

Now the problem I'm having is if I drag a couple of boxes from List1 into List2, then drag a box from List1 into List3, then go and re-order List2, it thinks I'm adding something from another list and runs the code again in the 'receive:' function in the sortable code for List2. So it effectively changes the id of the box I'm dragging in List2.

My code is actually a bit more complicated than I'm describing, so trying to avoid pasting any of my code into this. In fact I'll paste a simplified bit of it to give you an idea:

$(".List1 > li").draggable({
  helper:'clone',
  opacity: 0.4,
  connectToSortable:'.List2, .List3'
});

$(".List2").droppable({
  drop: function(e, ui) {
    draggedItem = ui.draggable;
  }
}).sortable({
  tolerance: 'pointer',
  cursor: 'move',
  opacity: 0.4,
  receive: function(event, ui) {
    //code to change box colour & assign id using 'draggedItem' variable above
  },
  update: function(event, ui) {
    //some code here
  }
});

$(".List3").droppable({
  drop: function(e, ui) {
    draggedItem2 = ui.draggable;
  }
}).sortable({
  tolerance: 'pointer',
  cursor: 'move',
  opacity: 0.4,
  receive: function(event, ui) {
    //code to change box colour & assign id using 'draggedItem2' variable above
  },
  update: function(event, ui) {
    //some code here
  }
});

Anything spring to mind?