Javascript jQuery可拖动克隆不'；Don’不要呆在丢东西的地方

我使用jQueryUI从一个div克隆一个元素，在另一个div拖动并释放。 在我第一次放下克隆的元素时，它改变了位置，远离了发布的位置。但是，它仍然可以拖动，并且在其他时间必须停留在那里

$(document).ready(function(){
    var counter = 1;
    $(".drag").draggable({
        revert: "invalid",
        helper: 'clone',
        cursor: "crosshair",
        containment: 'frame',
        stop: function(event, ui) {
            var cloned = $(ui.helper).clone();
            cloned.attr("id", "clonedElem" + counter);
            var pos = $(ui.helper).offset();

            var draggableOffset = ui.helper.offset(),
                droppableOffset = $(this).offset(),
                left = draggableOffset.left - droppableOffset.left,
                top = draggableOffset.top - droppableOffset.top;

            cloned.css({
                "position": "absolute",
                "left": left,
                "top": top
            });

            cloned.attr("visible", "true");

            cloned.draggable({
                containment: 'parent',
                stop:function(ev, ui) {
                    console.log("aqui");
                }
            });
            $("#frame").append(cloned);
            counter++;
        }
    });  

    $("#frame").droppable({
        accept: ".drag",
    });
});

以及HTML：

<div id="wrapper">
    <ul id="options" class="list-group col-md-1">
        <li class="list-group-item">
            <div id="drag1" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-fire"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag2" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-magnet"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag3" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-globe"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag4" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-briefcase"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag5" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-tower"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag6" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-tree-deciduous"></span>
                </h1>
            </div>
        </li>
    </ul>
    <div id="frame" class="col-md-11 ui-droppable" style="border: 2px #000 solid; height: 558px;">
    </div>
</div>

---

我在CSS中使用Bootstrap 3。

您的逻辑很好，但应用到错误的事件。您用来设置可拖放偏移量的

$（this）

实际上是

可拖放

，因为您在

可拖放

的

停止

事件中调用它。它应该位于可拖放的

事件的
拖放事件上。另外，避免使用top，因为它是
窗口
对象的一个属性，所以会产生不必要的行为。这应该起作用：

$(document).ready(function(){
    var counter = 1;
    $(".drag").draggable({
        revert: "invalid",
        helper: 'clone',
        cursor: "crosshair",
        containment: 'frame',

    });  

    $("#frame").droppable({
        accept: ".drag",
        drop: function(event, ui) {
            var cloned = $(ui.helper).clone();
            cloned.attr("id", "clonedElem" + counter);
            var pos = $(ui.helper).offset();

            var draggableOffset = ui.helper.offset(),
                droppableOffset = $(this).offset(),
                left = draggableOffset.left - droppableOffset.left,
                thisTop = draggableOffset.top - droppableOffset.top;

            cloned.css({
                "position": "absolute",
                "left": left,
                "top": thisTop
            });

            cloned.attr("visible", "true");

            cloned.draggable({
                containment: 'parent',
                stop:function(ev, ui) {
                    console.log("aqui");
                }
            });
            $("#frame").append(cloned);
            counter++;
        }
    });
});

小提琴：
偏移方法看起来很长，但保存了我的一天，jQuery UI应该考虑这个要求，以便可以减少更长的代码。