Question

如何使用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）。如何将其拖到右栏？

Answer 1

z-index对象的

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

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

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

我已经使用现有的元素更新了CodePen，现在它显示该项目已被放入正确的容器中......但它会更改内容。不确定这是不是你想要的，但那是你的JavaScript所做的。

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

使用interact.JS拖动

1 个答案: