다른 draggable을 떨어 뜨린 후 draggable 되돌리기

Question

나는 2x2 그리드 영역의 [[A, B] [C, D]] 그리드 아래에 draggables의 1x4 그리드가 있습니다. 나는 단지 서로 옆에 일정한 draggables를 원한다. 예를 들어, B에 draggable이 있고 다른 draggable을 A로 드래그하면 B에서 draggable을 되돌릴 수있는 방법이 있습니까? draggables에는 data-row 및 data-col이 있으므로 필요한 경우 이전/다음 열에서 draggable을 가져올 수 있습니다.

$(".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

우리가 끌어 시작할 때 3,691,363,210

.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의 계층 구조가 아닌 요소의 위치 지정 만 조정합니다. 귀하의 필요에 따라, 이것은 중요하지 않을 수 있습니다.