異なるドラッグ可能なものが取り除かれた後にドラッグ可能に戻す

Question

私はドロップ可能な領域[[A、B] [C、D]]の2x2グリッドを持っていて、グリッドの下にはドラッグ可能な1x4グリッドがあります。私はお互いの隣に特定のドラッググッズを置いておきたい。たとえば、Bにドラッグ可能なものがあり、Aに別のドラッグ可能なものをドラッグすると、Bでドラッグ可能にする方法はありますか？ draggablesにはdata-rowとdata-colがありますので、必要に応じてprev/nextカラムの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

私たちはドラッグを開始したとき

.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内の階層ではなく、要素の位置を調整するだけです。あなたのニーズに応じて、これは問題ではないかもしれません。