この記事は「SVG Advent Calendar 2014」の7日目の記事です。前日の記事は_tanshioさんの「IEにも対応したレスポンシブSVGの作り方」でした。, 以前、「HTML5のcanvas内の複数の画像をドラッグ&ドロップさせてみる」で書いた内容と同じことをSVGで試してみたくなったのでまとめました。, SVGを操作するためのライブラリはRaphaëlやSnap.svgが有名ですが、今回はsvg.jsとそのプラグインであるsvg.draggable.jsを利用しました。, svg.jsは、minifyされたものだと11.8KB 程度と非常に軽量で、ドキュメントも見やすく、今回触ってみてとても扱いやすいライブラリだと感じました。, 実際のコードはこんな感じで、オブジェクトに対して「draggable()を呼び出す」たったこれだけです。カンタン!!. 2つのエリアにそれぞれ違うリストを設定し、それぞれのoptionsに、オブジェクト形式でgroupのプロパティを持たせ、二つのエリアで同じ値を持たせます。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 // イベント名を使用 }); 引数にindexを持たせます。, Vue.Draggableは、Sortable.jsを元にしているので、同ライブラリのオプションを利用することができます。 単純にドラッグ&ドロップの機能が欲しければ、このライブラリを選んでおけば問題無いはずです。, 主な使用用途の並び順を変更するのはもちろん、複数のエリアを移動することが可能です。 $(".selector").draggable({ 【現在、表示中】≫ Draggable/Droppableウィジェットでドラッグ&ドロップ機能を実装するには? ページ上の指定された要素をマウスでドラッグ&ドロップできるようにするDraggable/Droppableウィジェットの基本的な使い方を解説。 このサンプルは、1つのエリアの中で並び順を変更するものになります。, の tagプロパティにulやolのような外部要素タグを設定します。 console.log("ドラッグ開始しました"); }); helper … ドラッグされているjqueryオブジェクト(オリジナル又はclone), position … (ドラッグされている要素の)jQueryの.position()で取得できる情報, offset … (ドラッグされている要素の)jQueryの.offset()で取得できる情報. 1つは、(マウスに関する)イベントオブジェクトで、2つ目は、以下の3つのプロパティを持つオブジェクトです。, 旧バージョンでは、2つ目のuiに「options」「absolutePosition」というプロパティもありましたが、現在は廃止されています。 console.log("ドラッグ開始しました"); コンパイルを必要としないUMD用のJSファイルが用意されているので、jQueryからの切り替えも容易に行う事が可能です。 これを使えばWordpressのメニュー的なのも作れそうですね。, vue-draggable-nested-treeは、ドラッグ要素をツリー形式に配置することが可能なdraggable&droppableコンポーネントです。tree-helper.js を使用することで、折りたたみを実装することも可能です。簡単に実装できるコピペと触って体感できるサンプルを掲載しています。, 印刷会社のWEB部隊に所属してます。 // optionsを使って設定 What is going on with this article? "bower_components/svg.draggable.js/svg.draggable.js", images/PAK15_sesujiwonobasutsuyopon500.jpg, デバイスでのパフォーマンス分析を自動化する新しいツールArm Mobile Studio, you can read useful information later efficiently. さらにスマホにも対応しており、タッチイベントによる移動も可能となっています。, 直接「Vue.Draggable」のリポジトリを取得する場合は、以下のURLから取得できます。, https://github.com/SortableJS/Vue.Draggable, 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 しかし、Vue.Draggableの特性と言いますか、制限のようなものでcomputedが使用できません。 -Draggable, sortable, Vue.Draggable, ドラッグアンドドロップ, ライブラリ, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, Date Picker Form UI Components vue.js ライブラリ, 毎日は見てられない人向けの2020年10月のVue.jsライブラリの紹介記事まとめです。, https://www.kabanoki.net/wp-content/uploads/2019/05/ea98b4ddbd9aad895475ed10c08b5ed6.mp4, Vue.jsのDate Time Picker「VueCtkDateTimePicker」の使い方, Vue.jsで軽量、シンプルなスムーススクロール実装する「vue2-smooth-scroll」, Webページ上の注釈を作成およびアニメーション化するライブラリ「vue-rough-notation」, Vue.jsで楽しくスクラッチできるコンポーネントを実装する「vue-scratchable」, Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ!, Vue.jsで10種類のハンバーガーメニューを「vue-burger-menu」で実装します.