javascript - jQuery 可拖动克隆不会停留在放置位置

Question

我正在使用 jQuery UI 从一个 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。

Answer 1

你的逻辑很好，但是你应用了错误的事件。您用来设置 droppableOffset 的 $(this) 实际上是 draggable，因为您在 stop 上调用它draggable 的 事件。它应该位于 droppable 的 drop 事件上。另外，请避免使用 top，因为它是 window 对象的属性，因此会产生不需要的行为。这应该有效:

$(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++;
        }
    });
});

fiddle :https://jsfiddle.net/vv6rzc4L/