Question

我想通过点击并拖动将div_1复制到div_2中。但即使在复制到div_2之后，也要将div_1保持在其位置。只有它在onclick中工作，请帮助我如何使用上述功能进行拖放操作。在此先感谢...！

$(document).ready(function()
{
    $('.div_1').on('click',function()
    {
        $('.div_1').appendTo('.div_2');
    });
});

我的代码在Jsfiddle ..！

Answer 1

助手将使您能够将元素保持在同一位置

$(".div_1").draggable({
    //revert: "valid",
    //clone the element which is dragged
    helper: "clone",
    //draggable area in which it is acceptable
    containment: "container",
    // cursor pointer style
    cursor: "move",
    stop: function () {
        $(this).draggable('option', 'revert', 'invalid');

    }
});

并将div_2设为droppable，接受div_1

$(".div_2").droppable({
        drop: function (event, ui) 
              {
              alert(ui);
              }
})

Answer 2

要克隆div，请使用droppable drop function中的ui.helper.clone();。

使用此代码可以正常工作：

$(document).ready(function()
{
    var x;                            // To store cloned div

    $(".div_1").draggable(
    {
        helper: "clone",
        cursor: "move",
        revert: true
    });

    $(".div_2").droppable(
    {
        drop: function(event, ui) 
        {
          x = ui.helper.clone();    // Store cloned div in x
          ui.helper.remove();       // Escape from revert the original div
          x.appendTo('.div_2');     // To append the cloned div
        }
    });
});

要了解真实动作，请使用此Jsfiddle link

将div的副本拖放到另一个div中

2 个答案:

使用此代码可以正常工作：