Posted on

画像の上にポイントを付けるjQueryを作ってみた








画像の上にポイントを置いて座標を取得して保存する仕組みを作ってみました。
使ったのはjQuery.uiの「ui.draggable.js」「ui.droppable.js」を使用しました。

ポイントの追加ボタンを押してポイントを追加し、ドラッグで画像の任意のところにドラッグします。
不要なポイントはドラッグしてゴミ箱に持っていくと消えます。
ポイントを配置した後に登録ボタンを押すと座標を取得して保存する流れになります。









動きは下記のとおりになります。
ソースはこちら
注)IEでは動かないのでfirefoxかgoogle clomeで動作させてください。

ポイント追加 ポイント削除
レイアウト図