Q

拖動interact.JS

2016-02-14 38 views 1 likes

1

如何使用Interact.JS在兩個引導列之間拖動對象？見http://codepen.io/drumiriades/pen/dGrygg。拖動interact.JS

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4">  
       <div class="boardLeft"> 
        <p>Left</p> 
        <div class="draggable"> 
        <p id="drag-1"> dragg me</p> 
         </div> 
       </div> 
      </div> 
      <div class="col-md-8"> 
       <div class="boardRight"> 
        <p>Right</p> 
       </div> 
      </div> 
     </div><!--/ row--> 
    </div> <!--/ container--> 
</body>

我有ID=drag-1一個對象，它是在左邊的列（Class= boardLeft）拖動，但我不能將其拖動到右邊一列（Class= boardRight）。我怎樣才能把它拖到正確的列？

2016-02-14 Diogo Miriades

A

回答

2

z-index.draggable對象必須是1或更大才能在正確的容器頂部看到.draggable對象。

此外，您的restrict選項設置爲僅將.draggable組件限制爲其父容器。刪除此選項可讓您將其拖入正確的容器中。

在這些夫婦的事情上面 - 如果引用在JavaScript元素不會在你的佈局存在（#grid-snap，.dropzone和#yes-drop）

我與做內容更新CodePen存在，現在它顯示該項目被放入正確的容器中......但它改變了內容。不知道這是你想要的，但這正是你的JavaScript正在做的。

http://codepen.io/anon/pen/yewLdb

2016-02-14 22:44:31

+0

刪除限制選項也將允許它要麼容器外拖（我不認爲這是期望的行爲）。我認爲一個更好的方法是將正確的容器作爲父容器放在它的父容器上時 –

+0

@OblivionCreations我不完全確定（在查看Ineteract的文檔後）如何將容器限制在合適的容器中。我用更多的信息更新了我的答案，這些信息可能有助於OP，但我知道它沒有提供完整的解決方案。 –

相關問題