忘れないように記録しとこ

Vue.DraggableでSortable.jsのオプションを使う

環境

sortable.js: v1.7.0

 

はじめに

この記事は、「Vue.Draggable」でSortable.jsのオプションを使う方法を書いています。

Vue.jsでドラッグアンドドロップを実装するなら「Vue.Draggable」がおすすめ

 

必要に応じて随時更新していこうと思います。

 

ダウンロード

https://github.com/RubaXa/Sortable

 

デモ

http://rubaxa.github.io/Sortable/

 

目次

  1. ドラッグで掴める箇所を指定
  2. アニメーションを設定
  3. 長押しでドラッグを可能にする

 

ドラッグで掴める箇所を指定

 

handle オプションは、アイテムをドラッグする際に掴む事ができるエリアを指定することができます。

<draggable>:options="{handle:'.handle'}"のように設定します。

handleのパラメーターに、掴みたい要素の id または class を設定します。

 

■デモ

See the Pen Vue.Draggable handele option by カバの樹 (@kabanoki) on CodePen.0

 

 

アニメーションを設定

 

animationオプションは、ソート時のアニメーション速度をミリ秒で指定します。
<draggable>:options="{animation:300}"のように設定します。

 

■デモ

See the Pen Vue.Draggable animation option by カバの樹 (@kabanoki) on CodePen.0

 

長押しでドラッグを可能にする

 

delayオプションは、並べ替えを開始するタイミングをミリ秒単位で指定します。
<draggable>:options="{delay:200}"のように設定します。

 

■デモ

See the Pen Vue.Draggable animation option by カバの樹 (@kabanoki) on CodePen.0

 

 

いかがでしょうか?

今日はこの辺でー

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

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

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