jquery在3个或更多div之间交换或移动元素

我的剧本：

$(function () {
     initSwap();

     function initSwap() {
         initDroppable($(".dropdiv img,.dragdiv img"));
         initDraggable($(".dragdiv img,.dropdiv img"));
     }

     function initDraggable($elements) {
         $elements.draggable({
             appendTo: "body",
             tolerance: "pointer",
             helper: "clone",
             revert: "invalid"
         });
     }

     function initDroppable($elements) {
         $elements.droppable({
             appendTo: "body",
             activeClass: "ui-state-default",
             hoverClass: "ui-drop-hover",
             accept: ":not(.ui-sortable-helper)",

             over: function (event, ui) {
                 var $this = $(this);
             },
             drop: function (event, ui) {
                 var draggableId = ui.draggable.attr("id");
                 var draggablePlace = ui.draggable.attr("place");

                 var droppableId = $(this).attr("id");
                 var droppablePlace = $(this).attr("place");

                 var $this = $(this);
                 var linew1 = $(this).after(ui.draggable.clone());
                 var linew2 = $(ui.draggable).after($(this).clone());

                 $(ui.draggable).remove();
                 $(this).remove();
                 initSwap();
             }
         });
     }
 });

我做了一个jsFiddle：

它几乎完美，但我还需要做一件事

我想储存容器的元件，以便盒子可能是空的，并且只有在将一个元件移动到另一个元件后才能制作替换零件

---

那么您的意思是，您希望在拖动图像时源框显示为空，而不是在切换之前一直显示源框的重影图像？我希望在boxex和container之间切换元素，并将元素从一个框移动到另一个容器（然后框为空）容器中的元素可以排序。如何在不克隆（框为空）的情况下将元素从一个框移动到另一个容器！：(