Question

我一直在尝试克隆并放置一个可拖动的位置，在拖放发生的坐标处的可放置位置。我在网上找到了一些处理将dropggables附加到droppables上的例子，但是他们似乎都把可拖动的东西移到了最初掉落的droppable的特定部分。

以下是一个例子： - 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());
        }
    });
});

无论如何，我可以在可能发生跌落的坐标处停留吗？

Answer 1

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

drop：function（event，ui）{ if（！ui.draggable.hasClass（“drop”））

        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/

Answer 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
                });
            }  
        }
    });
});

Answer 3

ui处理程序中的

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

    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/

在放置位置放下一个可拖放的拖拽

3 个答案: