在拖放不同的可拖動後回覆可拖動

Question

我有可拖放區域的[2x，2]網格[[A，B] [C，D]]，網格下面是1x4的可拖動網格。我只想要一些相鄰的可拖動對象。例如，如果在B中有可拖動的，並且我將一個不同的可拖動元素拖到A中，是否有辦法讓B中的可拖動元素恢復？可拖動的數據行和數據列允許我可以在需要時抓取前一列/下一列中的可拖動數據。

$(".draggable").draggable({ 
      scroll: false, 
      snap: ".snaptarget", 
      snapMode: "inner", 
      stack: ".draggable", 
      revert: function (event, ui) { 
       var $draggable = $(this); 
       $draggable.data("uiDraggable").originalPosition = { 
        top: 0, 
        left: 0 
       }; 

       return !event; 
      } 
}); 

$(".snaptarget").droppable({ 
      accept: ".draggable", 
      drop: function (event, ui) { 
       var $draggable = $(ui.draggable); 
       var $droppable = $(this); 

       // This droppable is taken, so don't allow other draggables 
       $droppable.droppable('option', 'accept', ui.draggable); 

       ui.draggable.position({ 
        my: "center", 
        at: "center", 
        of: $droppable, 
        using: function (pos) { 
         $draggable.animate(pos, "fast", "linear"); 
        } 
       }); 

       // Disable prev or next droppable if the pagewidth == 1 
       if ($droppable.data("col") == 1) { 
        $droppable.next().droppable("option", "disabled", true); 
        var nextDrag = $(".draggable[data-row='" + $droppable.data("row") + "'][data-col='2']"); 
        if (nextDrag.length) { 
         // I need to revert nextDrag if there is one. 
         // I've tried this but it doesn't seem to work 
         nextDrag.data("uiDraggable").originalPosition = { 
          top: 0, 
          left: 0 
         } 
        } 
       } 
      }, 
      tolerance: "pointer" 
     }); 

Answer 1

花了一點工作，我從來沒有好的偏移和定位。這是關鍵：

function returnItem(item, target) { 
    // Get Origin 
    var oPos = item.data("uiDraggable").originalPosition; 
    // Adjust Postion using animation 
    item.position({ 
     my: "top left", 
     at: "top left+" + oPos.left, 
     of: target, 
     using: function(pos) { 
     item.animate(pos, "fast", "linear"); 
     } 
    }); 
    } 

這裏是基於Draggable Snap to element grid example工作示例：

https://jsfiddle.net/Twisty/a4ucb6y3/6/

HTML

<div id="target"> 
    <div class="snaptarget ui-widget-header" data-col="1" data-row="1" style="top: 0; left: 0;"> 
    </div> 
    <div class="snaptarget ui-widget-header" data-col="2" data-row="1" style="top: 0; left: 80px;"> 
    </div> 
    <div class="snaptarget ui-widget-header" data-col="1" data-row="2" style="top: 80px; left: 0;"> 
    </div> 
    <div class="snaptarget ui-widget-header" data-col="2" data-row="2" style="top: 80px; left: 80px;"> 
    </div> 
</div> 

<br style="clear:both"> 

<div id="source"> 
    <div id="drag-A" class="draggable ui-widget-content" style="left: 0;"> 
    <p>Drag A</p> 
    </div> 
    <div id="draggable2" class="draggable ui-widget-content" style="left: 80px;"> 
    <p>Drag B</p> 
    </div> 
    <div id="draggable3" class="draggable ui-widget-content" style="left: 160px;"> 
    <p>Drag C</p> 
    </div> 
    <div id="draggable4" class="draggable ui-widget-content" style="left: 240px;"> 
    <p>Drag D</p> 
    </div> 
</div> 

CSS

.draggable { 
    width: 80px; 
    height: 80px; 
    font-size: .9em; 
    position: absolute; 
    top: 0; 
} 

.draggable p { 
    text-align: center; 
    height: 1em; 
    margin-top: 30px; 
} 

#source { 
    width: 320px; 
    height: 80px; 
    position: relative; 
} 

#target { 
    width: 160px; 
    height: 160px; 
    position: relative 
} 

.snaptarget { 
    width: 80px; 
    height: 80px; 
    position: absolute; 
} 

jQuery的

$(function() { 
    function returnItem(item, target) { 
    // Get Origin 
    var oPos = item.data("uiDraggable").originalPosition; 
    // Adjust Postion using animation 
    di.position({ 
     my: "top left", 
     at: "top left+" + oPos.left, 
     of: target, 
     using: function(pos) { 
     item.animate(pos, "fast", "linear"); 
     } 
    }); 
    } 

    $(".draggable").draggable({ 
    scroll: false, 
    snap: ".snaptarget", 
    snapMode: "inner", 
    stack: ".draggable", 
    revert: "invalid", 
    start: function(e, ui) { 
     var off = $("#source").position(); 
     ui.helper.data("uiDraggable").originalPosition = { 
     top: ui.position.top, 
     left: ui.position.left 
     }; 
    } 
    }); 

    $(".snaptarget").droppable({ 
    accept: ".draggable", 
    drop: function(event, ui) { 
     var $draggable = $(ui.draggable); 
     var $droppable = $(this); 

     // This droppable is taken, so don't allow other draggables 
     $droppable.droppable('option', 'accept', ui.draggable); 

     // Disable prev or next droppable if the pagewidth == 1 
     if ($droppable.data("col") == 1) { 
     $droppable.next().droppable("option", "disabled", true); 
     var nextDrag = $(".draggable[data-row='" + $droppable.data("row") + "'][data-col='2']"); 
     if (nextDrag.length) { 
      // I need to revert nextDrag if there is one. 
      returnItem(nextDrag, $("#source")); 
     } 
     } 
    }, 
    tolerance: "pointer" 
    }); 
}); 

在拖動的，當我們開始拖，我們要記錄原來的位置（如果我們以後需要恢復）。 revert選項設置爲invalid，以防用戶將其拖離其他某個地方。

我們將position添加到拖動項目的data，以便稍後可以閱讀。

當物品被丟棄時，發生魔法時。你已經完成了所有的檢查，只需要返回該項目，如果它不適合。如果nextDrag存在，我們將它返回給它的源代碼。未來，您可能需要考慮追加，克隆和刪除開始/停止事件中的元素。現在，我們只調整元素的位置，而不是DOM中的層次結構。根據您的需求，這可能無關緊要。