1

我想知道如何使用以下代码克隆元素并将其附加到可放置区域：

    $(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    

            var width = $this.width();
            var height = $this.height();
            var cntrLeft = width / 2 - ui.draggable.width() / 2;
            var cntrTop = height / 2 - ui.draggable.height() / 2;

            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

如果有人详细解释我，我会很高兴。请尝试在 Fiddle 中给我一个例子。它对我有很大帮助。谢谢。

感谢您的快速响应，是的，它很好，当我拖动克隆时它不起作用，我需要交换克隆到最近的位置。正如您在下面提到的示例中看到的那样，它是不可拖动的一旦它落在目标上。

http://jsfiddle.net/kiran/brCX5/31/embedded/result/

网站链接是http://www.vitsoe.com/en/re/shop/606/sketchtool，您可以在其中看到我的意思，但在此链接中它只是附加的，但我需要将其删除，即..被捕捉到最近的路径，当我用相同的图像放下时，它应该附在现有的下面而不是重叠。

再次感谢您的回复。

感谢您的回复，我需要它完全相同，但是发生的情况是，当我按照我之前所说的那样交换位置时，​​它不会捕捉到最近的坐标，因为我们首先拖放到目标上，还有一件事是尽管 div 部分的末尾没有间隙，但它正在添加图像，如果最后没有位置，它应该检查顶部或底部是否有间隙，它应该附加到图像，否则它应该你能检查一下吗？

4

1 回答 1

-1

我认为这就是你想要的：http: //jsfiddle.net/maniator/brCX5/33/

$(function() {
    $(".draggable").draggable({
        helper: 'clone',
        snap: '.ui-droppable',
        snapMode: 'outer'
    });

    $(".droppable").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            var clone = $(ui.draggable).clone();
            $(this).append(clone);
            clone.removeClass('draggable')
            clone.draggable({
                snap: '.ui-droppable',
                snapMode: 'outer'
            });
        }
    });
});

像魅力一样工作:-)，欢迎您

于 2011-03-24T22:31:45.220 回答