不同div元素中的jQuery UI交换元素

Question

我想要做的是交换不同div元素中的元素。这里是我的代码：JSfiddle

每个div只能有一个被丢弃的元素。如果drop_ div已经丢弃了元素，并且可丢弃元素从#tire_deck中被丢弃了，它必须被拒绝。如果元素从其他div中删除，则必须交换。任何人都可以帮助我实现这个目标吗？

Answer 1

我想出了如何实现我正在寻找的结果：JSFiddle，也许它会对某人有用。

在拖动事件中，我添加start事件以获取它的原始父ID：

  var parent_div_data;       
      $(".tire").draggable({ 
       appendTo: "body", 
       cursor: "move", 
       helper: 'clone', 
       revert: "invalid", 
       start: function(event, ui) { 
        parent_div_data = $(this).parent().attr("id"); 
       } 
      }); 

然后在投掷的drop事件中，我检查有多少可拖动的元素了，而增补的第一元素，第二元素的父div

if($(this).find(".tire").length == 1){ 
        var first = $(this).find(':first-child'); 
        $('#' + parent_div_data).append(first); 
       } 

Answer 2

我会去了解它的方式，是存储可拖动父当拖动开始，然后我们它来决定是我掉的孩子或停止的事情。

这是小提琴：

http://jsfiddle.net/vvn5S/

和JavaScript：

 $(function() { 
      var origin; 
      $(".tire").draggable({ 
       appendTo: "body", 
       cursor: "move", 
       helper: 'clone', 
       revert: "invalid", 
       start: function (event, ui) { 
        origin = event.target.parentNode; 
       } 
      }); 
      $("#tire_deck").droppable({ 
       tolerance: "intersect", 
       accept: ".tire", 
       activeClass: "ui-state-default", 
       hoverClass: "ui-state-hover", 
       drop: function (event, ui) { 
        $("#tire_deck").append($(ui.draggable)); 
       } 
      }); 
      $(".drop_1, .drop_2, .drop_3, .drop_4, .drop_5, .drop_6").droppable({ 
       tolerance: "intersect", 
       accept: ".tire", 
       drop: function (event, ui) { 
        if (this.children.length == 0) { 
         $(this).append($(ui.draggable)); 
        } else { 
         if (origin.id !== "tire_deck") { 
          event.stopPropagation(); 
          var copyNode = $(this).children().detach(); 
          $(this).append($(ui.draggable)); 
          $(origin).append(copyNode); 
         } else { 
          alert("Stopped!"); 
         } 
        } 
       } 
      }); 
     });