jQueryでドラッグできる要素を作るのにdraggableは便利ですよね。
でもただドラッグ要素を作るだけだとその要素自体が移動してしまうのが少し困ります。
という訳でdraggableで作った要素をドラッグしたときにそのコピー(クローン)を作成する方法を紹介
このページの目次
普通にdraggableでドラッグ要素を作ると・・・
draggableはドラッグ要素を作るのに便利です。
ただ１つ問題があってそれは初めに書いたようにドラッグ要素のコピーが作れない事
例えばドラッグ要素として次のようなdiv要素を作ったとしましょう。
|
1 |
<div class="my_draggable">ドラッグできるよ</div> |
この要素をドラッグ可能にする方法はめちゃくちゃ簡単で次の通り
|
1 2 3 |
$(function(){ $('.my_draggable').draggable(); }); |
要素に対して draggable を呼び出すだけです。(ただしjQuery UIを入れてることが前提条件)
すごく簡単なんですが、これだけだとドラッグしたときに次のような状態になります。
- ドラッグすると要素自体が移動する
- 元々の場所から要素が離れる
こういう動作でもいい場合もあるかもですが、オリジナルの要素を残しておきたいこともありますよね。
じゃあどうすればいいかというのが次で説明する方法です。
ドラッグ要素のクローンを作るには
ドラッグ要素のコピーというかクローンを作るにはdraggableに対してhelperオプションを指定します。
helperオプションに対して 'clone' を指定することでコピーが作成可能です。
上の説明だけだと分かりにくいの実際のコード例を出すと次の通り
|
1 2 3 4 5 |
$(function(){ $('.my_draggable').draggable({ helper: 'clone' }); }); |
たったこれだけです。
あとは何にもしなくてもドラッグしたときにコピーが作成されて元の場所に要素が残ります。
実際にどういう風に動くかは次の CodePen を見てください。
See the Pen 【jQuery】draggableで要素のクローンを作る by ぴー助 (@pisuke-code) on CodePen.
ちなみにコピーされた要素はドラッグが解除された瞬間に消えます。
draggableの関連記事
jQueryのdraggableで要素幅が縮んでしまう時の対処法
jQueryのdraggable要素にz-indexを指定して最前面表示する方法
ここまでのまとめ
draggableは便利で僕自身もよく使いますが、オプションについてはまだまだよく分かりません。
なので使いこなせるように色々オプションを勉強していきたいです。
ということで draggable で要素のコピー(クローン)を作る方法を紹介しました。
ではでは($・・)/~~~
