jQuery UIのdraggableで要素をドラッグアンドドロップで移動させる

枠代わりの要素をドラッグアンドドロップで移動させて直感的に範囲で画像のトリミングできるようなものを作りたかったので、jQuery UIのdraggableを使ってみた。

はじめに
1.どこでも動かせる
2.指定範囲内で動かす
3.指定範囲内でpotisionを取得する
座標データを取得する

jQuery UIのdraggableで要素をドラッグアンドドロップで移動させてみるサンプル

デモの解説なので並べてみるとわかりやすいかも。

はじめに

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

jQueryとjQuery UI読み込んでください。
これだけです。

1.どこでも動かせる

html

<div class="wrap">
    <div class="move red">要素1</div>
    <div class="move green">要素2</div>
</div>

JavaScript

$(".move").draggable();

解説も必要ないくらい簡単ですね。動かしたい要素を指定するだけです。

2.指定範囲内で動かす

html

<div class="wrap" id="w2">
    <div class="move2 red">要素1</div>
    <div class="move2 green">要素2</div>
    <div class="move2 blue">要素3</div>
</div>

JavaScript

$(".move2").draggable({ containment: "#w2" });

.draggable()の中に{ containment: “#w2” }として、可動域にしたい親要素を指定するだけです。

3.指定範囲内でpotisionを取得する

html

<div class="wrap" id="w3">
    <div class="move3 blue" id="posi">要素1</div>
</div>

JavaScript

$(".move3").draggable({ containment: "#w3" });
$('#posi').bind("mousemove", function() {
    var left = $('#posi').css("left");
    var top = $('#posi').css("top");
    $('#left').val(left);
    $('#top').val(top);
});

実質2.と一緒で移動させた要素のpositionを取得しているだけです。
私のやりたいことは3.の可動域の要素に画像を背景っぽく敷いて、
動かせる要素をトリミング領域として使えば画像のトリミングが簡単にできるようになります。
このjsで取得した値を画像の切り取り位置として、トリミング用phpにPOST送信してやれば完成です。