私はこのようなことをしたことがないので、それを行う方法を推測していました。
2 列のページ (html? jquery? php?) を実装する必要があります。最初の列には、ある列から別の列にドラッグ アンド ドロップする要素 (複数の正方形の画像) が含まれています。すべての要素にはそれぞれ異なる値があり、2 番目の列にドロップされた正方形の値を合計して完全に到達した値をユーザーに表示したいと考えています。
簡単に説明すると、最初の列のすべての要素は、ジムで利用できるコースを表す画像です。ユーザーは 2 番目の列に 1 つまたは複数のコースをドラッグできます。ジムの月間総コストを視覚化したいと考えています。これは、従うことにしたコースの数と種類 (2 番目の列にドラッグしたもの) に応じて異なります。
どうすればこのようなことができますか？私はjqueryを使用する必要があると思います...
jQuery UI の draggable()がこれに役立ちます。
ドラッグ可能な各要素に data-cost 属性を割り当てると、stop() イベントで計算を実行して、2 列目の要素のコストを合計できます。
JQuery UI には多少のオーバーヘッドがあります (特に提供されている CSS/画像ファイルを使用する場合)。
Sortable()は、必要なものにさらに近いかもしれません。
HTML5 にはネイティブのドラッグ アンド ドロップ機能があります。
http://www.html5rocks.com/en/tutorials/dnd/basics/
オブジェクトをドラッグ可能にするのは簡単です。移動可能にしたい要素に draggable=true 属性を設定します。画像、リンク、ファイル、その他の DOM ノードなど、ほぼすべてのものをドラッグ可能にすることができます。
この jQuery UI Droppable 機能をカスタマイズしたいと思うでしょう: http://jqueryui.com/demos/droppable/#visual-feedback