2

Buttons要素のリスト（ 、TextBox）からドラッグして、クローンを「フォームデザイナー」にドロップしたいと思いますdiv。元の要素の属性を取得し、そのフォームデザイナで新しい要素を作成するにはどうすればよいdivですか？

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

1 に答える 1

3

この最初のケースでは、この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());
            }
        });
    });​

Designer 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);
    }
});
​
于 2012-05-30T11:18:07.153 に答える