jQuery UI：从原始div拖放和克隆，但保留克隆品。

Question

我有一个div，应用了jQuery UI Draggable。我想要做的是点击并拖动它，创建一个克隆体，保留在dom中，在放置时不被删除。

想象一下一副牌，我的盒子元素就是整副牌，我想从牌堆上取出卡牌/ div，并让它们散布在我的页面上，但它们会是原始div的克隆版本。 我只想确保您不能创建另一个克隆的div的克隆体。

我已经使用了以下内容，但并未按照我所希望的方式工作：

$(".box").draggable({ 
        axis: 'y',
        containment: 'html',
        start: function(event, ui) {
            $(this).clone().appendTo('body');
        }
});

我找到了解决方案:

$(".box-clone").live('mouseover', function() {
    $(this).draggable({ 
        axis: 'y',
        containment: 'html'
    });
});
$(".box").draggable({ 
    axis: 'y',
    containment: 'html',
    helper: 'clone'
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
});

- Nic Hubbard

---

你可以把你的解决方案发布为答案，然后接受它。 :) - Nikki Erwin Ramirez

您应该将您的解决方案发布为答案，然后接受它 :) - Anurag

Answer 1

最终我做成了以下的代码：

$(".box-clone").live('mouseover', function() {
    $(this).draggable({ 
        axis: 'y',
        containment: 'html'
    });
});
$(".box").draggable({ 
    axis: 'y',
    containment: 'html',
    helper: 'clone',
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
});

- Nic Hubbard

---

你为什么使用 live 而不是 .draggable()? 实际上，.draggable() 不起作用。 - Godgog Arsenal

@GodgogArsenal 嗯，我真的不记得了。那是9年前的事了。 :) - Nic Hubbard

Answer 2

如果你想将元素（比如<li/>）从#source <ul/>移动到#destination <ul/>，并且想要它们被克隆（而不是移动），同时仍然可以在右侧进行排序，我找到了这个解决方案：

$(function() {

    $("#source li").draggable({
        connectToSortable: '#destination',
        helper: 'clone'
    })

    $("#destination").sortable();

  });

我知道这似乎非常简单，但对我很有效！ :)

- sparkyspider

---

这对我很有帮助，但是我如何访问克隆对象？ - arpo

Answer 3

这是他的解决方案：

$(".box-clone").live('mouseover', function() {
    $(this).draggable({ 
        axis: 'y',
        containment: 'html'
    });
});
$(".box").draggable({ 
    axis: 'y',
    containment: 'html',
    helper: 'clone'
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
});

- jjclarkson

Answer 4

这是我让它工作的方法： PS：'marker' 是要拖动的对象，'map' 是目标容器。

$(document).ready(function() {
    //source flag whether the drag is on the marker tool template
    var template = 0;
    //variable index
    var j = 0;
    $(".marker").draggable({
        helper: 'clone',
        snap: '.map',
        start: function(event, ui) {
            //set the marker tool template
            template = 1;
        }
    });
    $(".map").droppable({
        accept: ".marker",
        drop: function(event, ui) {
            $(this).find('.map').remove();
            var item = $(ui.helper);
            var objectid = item.attr('id');
            //if the drag is on the marker tool template
            if (template == 1) {
                var cloned = $(item.clone());
                cloned.attr('id', 'marker' + j++);
                objectid = cloned.attr('id');
                cloned.draggable({
                    containment: '.map',
                    cursor: 'move',
                    snap: '.map',
                    start: function(event, ui) {
                        //Reset the drag source flag 
                        template = 0;
                    }
                });
                cloned.bind("contextmenu", function(e) {
                    cloned.remove();
                    return false;
                });
                $(this).append(cloned);
            }
            i++;
            var offsetXPos = parseInt(ui.offset.left - $(this).offset().left);
            var offsetYPos = parseInt(ui.offset.top - $(this).offset().top);
            alert("Dragged " + objectid + " to (" + offsetXPos + "," + offsetYPos + ")");
        }
    });
});

- suresh