jQueryでdraggable要素のコピー(クローン)を作る方法

jQueryでドラッグできる要素を作るのにdraggableは便利ですよね。

でもただドラッグ要素を作るだけだとその要素自体が移動してしまうのが少し困ります。

という訳でdraggableで作った要素をドラッグしたときにそのコピー(クローン)を作成する方法を紹介

普通にdraggableでドラッグ要素を作ると・・・

draggableはドラッグ要素を作るのに便利です。

ただ1つ問題があってそれは初めに書いたようにドラッグ要素のコピーが作れない事

 

例えばドラッグ要素として次のようなdiv要素を作ったとしましょう。

 

この要素をドラッグ可能にする方法はめちゃくちゃ簡単で次の通り

要素に対して draggable を呼び出すだけです。(ただしjQuery UIを入れてることが前提条件)

 

すごく簡単なんですが、これだけだとドラッグしたときに次のような状態になります。

  • ドラッグすると要素自体が移動する
  • 元々の場所から要素が離れる

こういう動作でもいい場合もあるかもですが、オリジナルの要素を残しておきたいこともありますよね。

じゃあどうすればいいかというのが次で説明する方法です。

ドラッグ要素のクローンを作るには

ドラッグ要素のコピーというかクローンを作るにはdraggableに対してhelperオプションを指定します。

helperオプションに対して 'clone' を指定することでコピーが作成可能です。

 

上の説明だけだと分かりにくいの実際のコード例を出すと次の通り

たったこれだけです。

あとは何にもしなくてもドラッグしたときにコピーが作成されて元の場所に要素が残ります。

 

実際にどういう風に動くかは次の CodePen を見てください。

See the Pen 【jQuery】draggableで要素のクローンを作る by ぴー助 (@pisuke-code) on CodePen.

ちなみにコピーされた要素はドラッグが解除された瞬間に消えます。

draggableの関連記事

jQueryのdraggableで要素幅が縮んでしまう時の対処法

jQueryのdraggable要素にz-indexを指定して最前面表示する方法

ここまでのまとめ

draggableは便利で僕自身もよく使いますが、オプションについてはまだまだよく分かりません。

なので使いこなせるように色々オプションを勉強していきたいです。

ということで draggable で要素のコピー(クローン)を作る方法を紹介しました。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください