Jquery 如何拖放克隆的HTML元素

我想从元素列表（

按钮

，

文本框

）中拖动，并将克隆放入“表单设计器”

div

。如何获取原始元素的属性并在表单设计器

div

中创建新元素

drop: function( event, ui ) 
{
    jQuery('<input/>', 
    { 
        type: 
        value: 
    }
    ).appendTo('#cartContent');                             
}

drop：函数（事件、用户界面）
{
jQuery（“”，
{ 
类型：
价值：
}
).appendTo（“#cartContent”）；
}

在第一种情况下，这允许您将元素拖到表单设计器上，并创建项目的副本，如中所示：

---

为了防止designer div中的项重叠，我使用了以下代码：

---

jQuery(function() {
    jQuery(".component").draggable({
        //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
        helper: function() {
            return jQuery(this).clone().appendTo('body').css({
                'zIndex': 5
            });
        },
        cursor: 'move',
        containment: "document"
    });




    jQuery('.ui-layout-center').droppable({
        activeClass: 'ui-state-hover',
        accept: '.component',
        drop: function(event, ui) {
            if (!ui.draggable.hasClass("dropped"))
                jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
            }
        });
    });​

$('.drop').droppable({
    tolerance: 'fit'
});

$('.drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

$('.drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});
​