不同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!"); 
         } 
        } 
       } 
      }); 
     });