jQuery UI DIV間のドラッグ＆ドロップ

Question

私はjQueryとjQuery UIライブラリに興味があり、純粋なJavaScriptプログラミングの実践よりも優れています。

私はa drag and drop GUI for my hobby siteを実装しようとしています。

$('#artOfBeing').draggable ({ 
    containment: '#dataFrame', 
    cursor: 'pointer', 
    snap: '#dataFrame', 
    helper: 'clone' 
}); 

$('#dataFrame').droppable({ 
    drop: handleDropEvent 
}); 

私はすでにそれが（先のドロップのdivにドラッグする）、右側のメニューバーのアイコンのためのクローニングの偉大な方法を提供することであったどのように簡単にjQueryについての利点を参照してください。

マウスで右向きのメニューバーの一番上のアイコンを選択すると、どんな種類の動きでもドラッグアンドドロップ操作がトリガされます。アイコンは包含関係#divにジャンプします（ソースと目的地の間でトランジションアニメーションを使わずに）

アイコンを選択してドロップdivに移動するときのスムーズな移行を実現したいと思います代わりに、コンテンツのMRにストレートジャンプ。サルのdivの。

私はまた、に関するいくつかの情報のように、ドラッグのをキャンセルし、道の下にドロップ操作でしょう。

これらを学ぶために最善の方法についてのヒントを提供してください。 jQueryライブラリの問題。

EDIT：下記のNababのソリューションには、いくつかの奇妙な影響があります。まず、ローカルマシンでチェックしているのか、Webホストサーバーからダウンロードしているのかによって、結果が異なります。

ローカルテストでは、IE9はうまく機能し、アイコンのドラッグは、ドラッグアンドドロップの両方のdivを格納する包含DIVに制限されています。 FFやChromeでのローカル実行は奇妙ですが、ドラッグ項目は奇妙な動作をします。

オンラインWebサーバーとそのすべてが同じように動作します。包含divは無視され、機能的な画面で好きなようにアイコンをドラッグできますが、コンテンツとnav div内のドラッグを制限したいと思います。

なぜこのような現象が起こっているのですか？

Answer 1

封じ込めがある場合は、ソースをこの封じ込めの中に入れるほうが理にかなっています。なぜあなたは閉じ込めになるDIVの中央スペース+ボタンスペースをラップしないのですか？アニメーションを実行することは、アイテムの位置がマウス（それをドラッグする）に依存するので非常に困難です。ソースがコンテナの外にある場合、この遷移をどのように実行するか想像できません。