Question

I want to drag from a list of elements (Buttons, TextBox) and drop clones into a “form designer” div. How can I get the original element’s attributes and create a new element in that form designer div?

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

Answer 1

In this first case, this allows you to drag elements onto the form designer and create duplicates of the item, as seen in this jsFiddle demo:

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

---

To prevent items in the designer div from overlapping, I used this code shown in this demo:

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

---