使用交互.JS拖动

Drag with interact.JS

本文关键字：拖动 JS 交互      更新时间：2023-09-26

如何使用 Interact.JS 在两个引导列之间拖动对象？请参阅 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(。如何将其拖到右列？

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

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

除了这几件事之外 - 你在JavaScript中引用了布局中不存在的元素(#grid-snap，.dropzone和#yes-drop(

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

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

相关文章：