Javascript 在下降位置将一个可下降的可下降装置中的一个可下降装置下降

我一直在尝试克隆一个可拖放的并将其放置在可拖放的位置，放置在发生拖放的坐标处。我在网上找到了一些例子，这些例子涉及到将可拖动项附加到可拖放项，但它们似乎都是在初始拖放时将可拖动项移动到可拖放项的特定部分

下面是一个例子，可以做到这一点：-

---

我是否可以使拖动的元素停留在发生拖放的坐标处？

ui

中的

拖放处理程序包含被拖动元素相对于页面的绝对位置。您需要将这些值转换为相对于放置目标的位置，并使用这些值将克隆元素绝对定位在放置目标内

    drop: function(e, ui) {
        if (!ui.draggable.hasClass("dropped")) {
            var parentOffset = jQuery('.ui-layout-center').offset();
            var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable();
            dropped.css('left', (ui.position.left  - parentOffset.left) +'px');
            dropped.css('top', (ui.position.top - parentOffset.top) +'px');

            jQuery(this).append(dropped);
        }
    }

必须在放置点的克隆元素中定义坐标：

drop：函数（事件、用户界面）{
如果（！ui.draggable.hasClass（“已删除”））

并通过css在克隆组件上设置绝对位置

.ui-layout-center .component {
   position:absolute !important;   
}

工作如下：
编辑代码并使用appendTo（）设置偏移量

jQuery(function() {
    jQuery(".component").draggable({
        //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
        helper: function() {
            return jQuery(this).clone().appendTo('body').css({
                'zIndex': 5
            });
        },
        cursor: 'move',
        containment: "document"
    });

    jQuery('.ui-layout-center').droppable({
        activeClass: 'ui-state-hover',
        accept: '.component',
        drop: function(event, ui) {
            var _this = jQuery(this);
            if (!ui.draggable.hasClass("dropped")) {
                var cloned = jQuery(ui.draggable).clone().addClass("dropped").draggable();
                jQuery(cloned).appendTo(this).offset({
                    top : ui.offset.top,
                    left: ui.offset.left
                });
            }  
        }
    });
});

这也非常有效！感谢您的回复！
.ui-layout-center .component {
   position:absolute !important;   
}

jQuery(function() {
    jQuery(".component").draggable({
        //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
        helper: function() {
            return jQuery(this).clone().appendTo('body').css({
                'zIndex': 5
            });
        },
        cursor: 'move',
        containment: "document"
    });

    jQuery('.ui-layout-center').droppable({
        activeClass: 'ui-state-hover',
        accept: '.component',
        drop: function(event, ui) {
            var _this = jQuery(this);
            if (!ui.draggable.hasClass("dropped")) {
                var cloned = jQuery(ui.draggable).clone().addClass("dropped").draggable();
                jQuery(cloned).appendTo(this).offset({
                    top : ui.offset.top,
                    left: ui.offset.left
                });
            }  
        }
    });
});