在放置位置的可放置对象中放置可拖动对象答案

【问题标题】：Dropping a draggable in a droppable at the drop position在放置位置的可放置对象中放置可拖动对象
【发布时间】：2014-10-11 08:00:12
【问题描述】：

我一直在尝试将可拖动对象克隆并放置在可放置对象中的位置放置发生的坐标处。我在网上找到了处理将可拖动对象附加到可放置对象的示例，但它们似乎都将可拖动对象移动到初始放置时可放置对象的特定部分。

这是一个例子： - http://jsfiddle.net/scaillerie/njYqA/

//JavaScript from the jsfiddle
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) {
        if (!ui.draggable.hasClass("dropped"))
            jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
        }
    });
});

无论如何我可以让可拖动的对象停留在发生放置的坐标处吗？

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

您必须在 drop 上的克隆元素中定义坐标：

drop: function(event, ui) { if (!ui.draggable.hasClass("dropped"))

        var clone=jQuery(ui.draggable).clone().addClass("dropped").draggable();
        clone.css('left',ui.position.left);    
        clone.css('top',ui.position.top);

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

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

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

这里正在运行：http://jsfiddle.net/o2epq7p2/

【讨论】：

【解决方案2】：

编辑您的代码并使用 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
                });
            }  
        }
    });
});

【讨论】：

【解决方案3】：

drop 处理程序中的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);
        }
    }

http://jsfiddle.net/3Lnqocf3/

【讨论】：

这也很完美！感谢您的回复！