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

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

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

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送信してやれば完成です。

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

座標データを取得する

続きはこちらで解説しています。

cropper.jsとphpで好きな範囲で画像をトリミングする
好きな範囲で画像を切り抜くことができるライブラリ「cropper.js」とphpで画像をトリミングする php関連記事 jQuery UIのdraggableでドラッグアンドドロップできる要素をつくる ...

コメント

タイトルとURLをコピーしました