ユーザーが項目 (ドラッグ可能な div) をページ (より大きな div) にドラッグ アンド ドロップできる jQuery で記述されたプロジェクトを継承しました。ページはドラッグとサイズ変更が可能で、アイテムは自由に配置したり、互いにスナップしたり、ページの端にスナップしたりできます。アイテムがページの端にぶら下がったり、重なったりすることはありません。
これらのアイテムを作成するためのデータは、別のプログラムから読み込まれます。各項目には、1/10mm 単位の「実際の」整数の幅と高さがあります。これらの項目を表す div を作成するために、これらの「実際の単位」は倍率 (現在は 50% ですが、ユーザーがズームインおよびズームアウトできるように、将来的には動的にしたいと考えています) を使用してピクセルに変換されます。
ユーザーがページ上のアイテムの配置に満足したら、デザインをエクスポートできます。ページの左上隅を基準としたアイテムの x、y ピクセル配置は、同じ倍率を使用して「実際の単位」に変換されます。
アイテムは、5x5 の実単位 (0.5mm) グリッドにスナップする必要があります。5 実単位 = 2.5px であるため、明らかにこれは不可能ですが、縮尺係数に関係なくこれを機能させたいと考えています。
ピクセル表現の一貫性を保ちながら、実単位が常にグリッド上にあることを確認して、実単位とピクセルの間を行き来する最も簡単な方法は何ですか? jQueryのドラッグ可能/ドロップ可能/サイズ変更可能なクラスに頼りながらこれを行うことはできますか、それともすべてを書き直した方がよいでしょうか?