jQueryのドロップボックスに要素をドラッグします

Question

jQueryページレイアウトを使用しました。今、私はこのコードでドロップ可能なページに要素をドラッグします。

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).show(); }, 
    cursor: 'move' 
    }); 

    jQuery('.ui-layout-center').droppable({ 
    accept: '.component', 
    drop: function() { show('.component') } 
    }); 
}); 

しかし、今ではドロップ可能な要素をページに再びドラッグできません。私はそのコードで間違いを犯しましたか？他の人がショーが（JQのドキュメントを参照してください）が正しく呼び出されていない、言ったように

Answer 1

は、あなたのドラッグ可能要素ドロップ可能で

$(".component").draggable({  
    revert: "invalid", // when not dropped, the item will revert back to its initial position 
    containment: "#Content", // stick to demo-frame if present    
    helper: "clone", 
    cursor: "move" 
}); 

Answer 2

ために、このテンプレートを使用します。とにかく私は、UIレイアウトにドラッグされた要素を追加したコードを付加しています...それは、私が過去にのためにクローンを使用しました何をやろうとしている正確にわからないです:)

jQuery(function() { 
    jQuery(".component").draggable({ 

    helper: function() { return $(this).clone().css({'zIndex':5,'background-color':'red'}); }, 
    cursor: 'move' 
    }); 

    jQuery('.ui-layout-center').droppable({ 
     accept: '.component' , 
     drop: function (event, ui) {$(this).append($(ui.draggable).clone()); } 
    }); 
}); 

Answer 3

あなたの間違いは、私は、関数_show_として上記のコードでJavaScriptのエラーを取得レン（修正）

jQuery(document).ready(function() { 
     jQuery(".component").draggable({ 
      helper: function() { return $(this).clone().appendTo('body').css({'zIndex':5,'background-color':'red'}); }, 
      cursor: 'move' 
     }); 
     jQuery('.ui-layout-center').droppable({ 
      accept: '.component' , 
      drop: function (event, ui) {$(this).append($(ui.draggable).clone()); }//This is to append the clone in '.ui-layout-center' when dropped 
     }); 
    });