URLをコピーしました!
スキルアップを始める!

【jQuery】ドラッグ&ドロップでページ内の画像を動かす方法(要素をドラッグアンドドロップ移動)

jQuery(ジェイクエリ)
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

前回は「JavaScriptを使ってドラッグアンドドロップでページ内の画像を移動させる」という話を書きましたが、今回は「jQuery」を使ってドラッグアンドドロップを実現してみます。

▶サンプルページはこちら

https://js.eguweb.tech/2112/

CDNで jQuery をインポートする

まずは、前回と同じように jQueryをインポートします。

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

jQueryの.draggable()を使う

.draggable()を使います。

Draggable
指定した要素をマウスで移動できるようにします。

https://js.studio-kingdom.com/jqueryui/interactions/draggable
<script>
$(document).ready(function () {
$(".img001").draggable();
});
</script>

[rml_read_more]

これだけで、画像(クラス)をドラッグアンドドロップさせることができるようになりました!便利です!

図形などの範囲内でのみ画像を動かせるようにする

「Draggable Widget」を使ってみます。

Draggable Widget
Description: Allow elements to be moved using the mouse.

https://api.jqueryui.com/draggable/

containment: “#div_containment”

といった指定をすることで、要素内に限定して稼働させることができるようです。

Forbidden - Stack Exchange
$(document).ready(function () {
$(".img002").draggable({ containment: "#range" });
});

できました!たしかに要素の範囲内でのみ画像が移動できるように限定されました。ちなみにcontainmentは「封じ込め」という意味があるようです。なるほど。

まとめ

JavaScriptで数行のコードで作っていたものがjQueryだとわずが1~2行で出来てしまう…という便利さがあります。jQuery便利ですね。

ご参考ください。

Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら