Javascript jQuery UI：从原始 div 中拖动和克隆，但保留克隆

jQuery UI: Drag and clone from original div, but keep clones

提问by Nic Hubbard

I have a div, which has jQuery UI Draggable applied. What I want to do, is click and drag that, and create a clone that is kept in the dom and not removed when dropped.

我有一个 div，它应用了 jQuery UI Draggable。我想要做的是单击并拖动它，然后创建一个保留在 dom 中并且在放下时不会删除的克隆。

Think of a deck of cards, my box element is the deck, and I want to pull cards/divs off that deck and have them laying around my page, but they would be clones of the original div. I just want to make sure that you cannot create another clone of one of the cloned divs.

想想一副纸牌，我的盒子元素是纸牌，我想从那副纸牌上拉出卡片/div 并将它们放在我的页面周围，但它们将是原始 div 的克隆。我只是想确保您不能为克隆的 div 之一创建另一个克隆。

I have used the following, which didn't work like I wanted:

我使用了以下内容，但没有像我想要的那样工作：

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

I figured out my solution:

我想出了我的解决方案：

$(".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');
    }
});

采纳答案by Nic Hubbard

Here is what I finally did that worked:

这是我最终做的工作：

$(".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');
    }
});

回答by sparkyspider

If you're tring to move elements (say <li/>) from a #source <ul/> to a #destination <ul/>, and you'd like them to clone (as opposed to move), and still be sortable on the right, I found this solution:

如果您想将元素（例如 <li/>）从 #source <ul/> 移动到 #destination <ul/>，并且您希望它们克隆（而不是移动），并且仍然是可在右侧排序，我找到了这个解决方案：

$(function() {

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

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

  });

I know it seems ultra simple, but it worked for me! :)

我知道这看起来非常简单，但它对我有用！:)

回答by jjclarkson

Here was his solution:

这是他的解决方案：

$(".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');
    }
});

回答by suresh

Here is how I got it working: PS: 'marker' is the object to drag and 'map' is the destination container.

这是我的工作方式： 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 + ")");
        }
    });
});