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>

我正在使用Bootstrap 3到CSS。

Answer 1

你的逻辑很好，但你正在应用错误的事件。您用来设置$(this)的{{1}}实际上是droppableOffset，因为您在draggable stop事件中调用它draggable。它应该在drop的{{1}}事件中。此外，避免使用top，因为它是droppable对象的属性，因此它会给出不需要的行为。这应该有效：

window

小提琴：https://jsfiddle.net/vv6rzc4L/

jQuery draggable clone不会停留在被删除的地方

1 个答案: