Jquery-ui 可拖动不会将顶部位置更改为初始位置的负数

Question

我一直在使用 Jquery-ui 可拖动来拖动几个 div 来为它们找到一个新位置，但我有一个问题。

当我初始化侧面时，我给 div 一个绝对位置，并设置它的左侧和顶部位置，以使 div 以正确的方式站立，我将它们包裹在 div 容器称为 'Device Preview'，然后将其用作工作正常的容器，对于第一个 div，第二个 div，它位于第一个 div 之下，不会从它的初始位置上升。我迷路了。

所以我创建了这个 JSfiddle，以展示我的代码如何破解，

HTML

<div class="col-md-6" id="DevicePreview" style="min-height:200px;" cg-busy="loader">
                        <div style="position:relative;" class="draggableObj">
                            <div style="position:absolute;">
                                <h3><i class="fa fa-fw fa-arrows btn-success" style="padding:2px; border-radius:15%;cursor:move" ></i>move It</h3>
                                <input class="form-control" disabled="disabled"/>
                            </div>
                        </div>
                         <div style="position:relative" class="draggableObj">
                            <div style="position:absolute; top:80px">
                                <h3><i class="fa fa-fw fa-arrows btn-success" style="padding:2px; border-radius:15%;cursor:move" ></i>move It</h3>
                                <input class="form-control" disabled="disabled"/>
                            </div>
                        </div>
                    </div>

JS

$( ".draggableObj" ).draggable({
  containment: "#DevicePreview"
});

正如我所说，我的问题是我无法获得底部的 div，无法与顶部的那个交换位置。

感谢您的宝贵时间。

Answer 1

所以我发现我的问题是我试图将 draggable 附加到 class 然后选择了多个元素。

结果是我只能捕捉到附加到可拖动区域的最后一个元素，除了最后一个，每个人都创建了自己的包含。

解决方案是在唯一的 Id 基础元素上创建它，由 som jquery 创建，然后就可以了。

Jquery-ui 可拖动不会将顶部位置更改为初始位置的负数

Jquery-ui Draggable won't change top position to negative of init position

html

jquery

jquery-ui

jquery-ui-draggable