Regarding ui.draggable

Regarding ui.draggable

Hi All,

I have three DIV for doing drop and drag, below is the codes

$(".block1").draggable({revert:true});
$(".block2").draggable({revert:true});

$("#source1").droppable({
      accept: ".block1",
      activeClass: 'droppable-active',
      hoverClass: 'droppable-hover',
      drop: function(ev, ui) {
            $(this).append($(ui.draggable));
      }
});

$("#source2").droppable({
      accept: ".block2",
      activeClass: 'droppable-active',
      hoverClass: 'droppable-hover',
      drop: function(ev, ui) {
            $(this).append($(ui.draggable));
      }
});

$("#destination").droppable({
      accept: ".block1, block2",
      activeClass: 'droppable-active',
      hoverClass: 'droppable-hover',
      drop: function(ev, ui) {
            if ($(this).children().length == 0)
                  $(this).append($(ui.draggable));
      }
});

By using the above code, I can append one item from "source1" or "source2"  to "destination"
But I would like to let program append back the item inside "destination" to "source1" or "source2" if there are more than one items inside "destination"

For example:
There are items 1,2,3,4,5 in "source1"
There are items 6,7,8,9,10 in "source2"
I append 1 into "destination"
Once I append 6 into "destination" again, need to append 1 back to "source1"

However, I don't know where 6 comes from, how can I append 6 back to "source1"? Is there any way to detect 6 comes from "source1"?

Many thanks,
Jacky