jquery - 如何拖放克隆的 HTML 元素

Question

我想从元素列表中拖动（Buttons, TextBox）并将克隆拖放到“表单设计器”div中。如何获取原始元素的属性并在该表单设计器中创建新元素div？

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

Answer 1

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

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());
            }
        });
    });​

---

为了防止设计器 div 中的项目重叠，我使用了这个演示中显示的代码：

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

---