用 interact.JS 拖动

Question

如何使用 Interact.JS 在两个 bootstrap 列之间拖动对象？参见 http://codepen.io/drumiriades/pen/dGrygg。

 <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)。我怎样才能将它拖到右栏？

Answer 1

.draggable 对象的

z-index 必须为 1 或更大才能在右侧容器顶部看到 .draggable 对象。

此外，您的 restrict 选项设置为仅将 .draggable 组件限制在其父容器中。删除此选项允许您将其拖到正确的容器中。

除此之外 - 您在 JavaScript 中引用了布局中不存在的元素（#grid-snap、.dropzone 和 #yes-drop)

我已经用确实存在的元素更新了 CodePen，现在它显示该项目已放入正确的容器中...但它更改了内容。不确定这是否是您想要的，但这就是您的 JavaScript 正在做的。

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

用 interact.JS 拖动

Drag with interact.JS

javascript

interact.js