Как перетащить клонированный элемент HTML

Question

Я хочу перетащить из списка элементов (), а также добавить клоны в «конструктор форм» div. Как я могу получить атрибуты исходного элемента и создать новый элемент в этом конструкторе форм div?

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

Answer 1

В первом случае, это позволяет перетаскивать элементы на форме дизайнера и создать копии элемента, как показано на 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()); 
            } 
        }); 
    });​ 

---

Чтобы предотвратить элементы в конструкторе ДИВ с перекрытием, я использовал этот код 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); 
    } 
}); 
​ 

---