开发拖放交换javascript/jquery

我正在实现一个拖放代码，我现在有6个可拖放的图像，这个代码的作用是当一个图像被拖到另一个图像上时，它们也交换所有的图像交换位置（就像一种排序）我试着做的只是交换两个图像的位置，剩下的就不用管了，有什么想法吗？？？代码（javascript和jquery）——

函数项插入点（拖动项，插入点）{
var oldspottItem=$（spot.find（'img'）；
如果（oldSpotItem.length>0）{
oldSpotItem.appendTo（“#inventory”）。可拖动({
回复：“无效”
});
}
变量项=$（“在没有看到HTML标记的情况下，我猜#circles是一个包含许多图像的拖放区域。这使得查找哪个图像被拖放变得更加困难。相反，为什么不让每个图像成为拖放目标，而不是整个#circles元素？这样你就可以确切地知道哪个图像被拖放到了，并且交换函数正在使用使用图像本身，而不是包含大量图像的整个元素。
您可以发布您的html或更好的，创建一个。谢谢您的回答，您能提供一些代码让我开始吗谢谢，或任何示例？？
function itemInSpot(drag_item, spot) {
    var oldSpotItem = $(spot).find('img');
    if (oldSpotItem.length > 0) {
        oldSpotItem.appendTo('#inventory').draggable({
            revert: 'invalid'
        });
    }
    var item = $('<img />');
    item.attr('src', drag_item.attr('src')).attr('class', drag_item.attr('class')).appendTo(spot).draggable({
        revert: 'invalid'
    });
    drag_item.remove(); // remove the old object
}

$(document).ready(function() {
    $(".circles").draggable({
        revert: 'invalid'
    });
    $('#inventory').droppable();
    $("#circles").droppable({
        accept: '.circles'
    })
    $('#circles,#inventory').bind('drop', function(ev, ui) {
        itemInSpot(ui.draggable, this);
    });
});