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

Posted 2023-02-22

【中文标题】jQuery UI：从原始 div 拖动和克隆，但保留克隆

【英文标题】：jQuery UI: Drag and clone from original div, but keep clones

【发布时间】：2011-01-28 08:46:15

【问题描述】：

我有一个 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');
    
);

【问题讨论】：

您可以发布您的解决方案作为答案，然后接受它。 :)

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

【参考方案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');
    
);

【讨论】：

你为什么用live而不是.draggable()？事实上，.draggable() 不起作用。

@GodgogArsenal 嗯，我不记得了。那是9年前。 :)

【参考方案2】：

如果您想将元素（例如

）从 #source 移动到 #destination ，并且希望克隆它们（而不是移动），并且仍然可以在右侧排序，我找到了这个解决方案：

$(function() 

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

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

  );

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

【讨论】：

这对我很有用，但我如何访问克隆的对象？

【参考方案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');
    
);

【参考方案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 + ")");
        
    );
);