1

我的脚本：

$(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：http: //jsfiddle.net/kehator/7bZrV/23/

它工作得几乎完美，但我还需要做一件事 <div id="container" class="container">

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

http://i.stack.imgur.com/V5BgL.jpg

4

0 回答 0