私のプロジェクトのjqueryuiに関する大きな問題

Question

jquery UIのドラッグアンドドロップ機能に関する質問があります。私は、ユーザーがパート・エリア（シェルフ）からステージにドラッグして自分のオブジェクトを構築できるWebアプリケーションを構築しています。このステージには、これらのサブコンポーネント/パーツが配置される本質的に円形のメインコンポーネントが含まれます。

これらの部分は透明な背景を持つ200px x 400pxの画像であり、ドラッグ可能です。彼らはステージエリアに落とすことができます。ここに私が直面している問題はここにあります：

私はこれらのオブジェクトをドラッグしてステージ領域に置くと、そのような大きな画像の高さのためにシェルフ領域に重なる傾向があります。このオーバーラップにより、シェルフ領域内の部品が選択不可能または不可能になります。さらに、多くのこのような部品がステージ上にある場合、そのような重複のために所望の部品を選択することは困難である。

この重複する問題を克服できる解決策はありますか？

開発プラットフォームは、そのサイズを減らすために、あなたの棚の上にドロップするときには、あなたの要素にクラスを追加することができますjQueryのUIと.NET

Answer 1

です。

あなたはドラッグ＆ドロップで使用しているプラ​​グインなど、コンテキストから離れた多くの情報を提供していません。

jQuery UI Droppableを使用して簡単な例を作成しました。 drop eventでは、ドロップされた要素にCSSクラスを追加します（ui.draggableからアクセス可能）。要素がターゲットからドラッグされた場合に備えて、out eventをバインドしてクラスを削除することもできます。

$("#droppable").droppable({ 
    drop: function(event, ui) { 
     $(ui.draggable).addClass('small'); 
    }, 
    out: function(event, ui) { 
     $(ui.draggable).removeClass('small'); 
    }, 
});​ 

DEMO

私はあなたがあなたに独自の実装を、この方法を適応させる可能性があるとします。