Vue.Draggable
v2.24.3
Vue コンポーネント (Vue.js 2.0) またはディレクティブ (Vue.js 1.0) により、ドラッグ アンド ドロップとビュー モデル配列との同期が可能になります。
Sortable.js に基づいて、そのすべての機能を提供します
vue.draggable.next を参照してください。
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tagおよびcomponentDataプロパティを使用してドラッグ可能にします。 後援者募集中！
このプロジェクトは役に立ちますか? ☕ か ? を買ってもらえますか？
yarn add vuedraggable
npm i -S vuedraggableVue 2.0 では vuedraggable ですが、バージョン 1.0 では vue-draggable ではないことに注意してください。
< script src =" //cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js " > </ script >
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
< script src =" //cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js " > </ script >
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
< script src =" //cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js " > </ script >cf 例セクション
ドラッグ可能なコンポーネントを使用します。
< draggable v-model =" myArray " group =" people " @start =" drag=true " @end =" drag=false " >
< div v-for =" element in myArray " :key =" element.id " > {{element.name}} </ div >
</ draggable >.vue ファイル:
import draggable from 'vuedraggable'
. . .
export default {
components : {
draggable ,
} ,
...transition-groupを使用する場合: < draggable v-model =" myArray " >
< transition-group >
< div v-for =" element in myArray " :key =" element.id " >
{{element.name}}
</ div >
</ transition-group >
</ draggable >ドラッグ可能なコンポーネントは、ドラッグ可能な要素を直接ラップするか、ドラッグ可能な要素を含むtransition-componentラップする必要があります。
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
</ div >
< button slot =" footer " @click =" addPeople " > Add </ button >
</ draggable > < draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
</ div >
< button slot =" header " @click =" addPeople " > Add </ button >
</ draggable > < draggable v-model =' myList ' > computed: {
myList : {
get ( ) {
return this . $store . state . myList
} ,
set ( value ) {
this . $store . commit ( 'updateList' , value )
}
}
}タイプ: Array
必須: false
デフォルト: null
ドラッグ可能なコンポーネントに配列を入力します。通常、内部要素 v-for ディレクティブによって参照される配列と同じです。
Vue.draggable は Vuex と互換性があるため、これが推奨される使用方法です。
これは直接使用するのではなく、 v-modelディレクティブを介してのみ使用する必要があります。
< draggable v-model =" myArray " > タイプ: Array
必須: false
デフォルト: null
value prop の代わりに、list はドラッグ アンド ドロップで同期される配列です。
主な違いは、 list prop は splice メソッドを使用してドラッグ可能なコンポーネントによって更新されるのに対し、 value不変であることです。
value prop と組み合わせて使用しないでください。
バージョン 2.19 の新機能
バージョン 2.19 以降、並べ替え可能なオプションは vue.draggable props として直接設定できるようになりました。
これは、ドラッグ可能なコンポーネントがイベントを介して同じ API を公開するため、「on」で始まるすべてのメソッドを除いて、すべての並べ替え可能なオプションが有効な並べ替え可能なプロパティであることを意味します。
kebab-case プロパティがサポートされています。たとえば、 ghost-classプロパティは、 ghostClassソート可能オプションに変換されます。
ハンドル、ソート可能、およびグループ オプションの設定例:
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
<!-- -->
</ draggable > タイプ: String
デフォルト: 'div'
ドラッグ可能なコンポーネントが、含まれるスロットの外部要素として作成する要素の HTML ノード タイプ。
vue コンポーネントの名前を要素として渡すことも可能です。この場合、ドラッグ可能な属性が作成コンポーネントに渡されます。
作成したコンポーネントに props または events を設定する必要がある場合は、componentData も参照してください。
タイプ: Function
必須: false
デフォルト: (original) => { return original;}
clone オプションが true の場合、要素のクローンを作成するためにソース コンポーネントで呼び出される関数。一意の引数は複製される viewModel 要素で、戻り値はその複製バージョンです。
デフォルトでは、vue.draggable は viewModel 要素を再利用するため、クローンまたはディープ クローンを作成する場合は、このフックを使用する必要があります。
タイプ: Function
必須: false
デフォルト: null
null でない場合、この関数は Sortable onMove コールバックと同様の方法で呼び出されます。 false を返すと、ドラッグ操作がキャンセルされます。
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}evt オブジェクトには、Sortable onMove イベントと同じプロパティと 3 つの追加プロパティがあります。
draggedContext : ドラッグされた要素にリンクされたコンテキストindex : ドラッグされた要素のインデックスelement : ビューモデル要素の基礎となるドラッグされた要素futureIndex : ドロップ操作が受け入れられた場合のドラッグされた要素の潜在的なインデックスrelatedContext : 現在のドラッグ操作にリンクされているコンテキストindex : 対象要素のインデックスelement : ターゲット要素ビューモデル要素list : ターゲットリストcomponent : ターゲット VueComponentHTML:
< draggable :list =" list " :move =" checkMove " >JavaScript:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}完全な例を参照: Cancel.html、cancel.js
タイプ: Object
必須: false
デフォルト: null
この props は、タグ props によって宣言された子コンポーネントに追加情報を渡すために使用されます。
価値：
props : 子コンポーネントに渡されるプロパティattrs : 子コンポーネントに渡されるattrson : 子コンポーネントでサブスクライブするイベント例 (要素 UI ライブラリを使用):
< draggable tag =" el-collapse " :list =" list " :component-data =" getComponentData() " >
< el-collapse-item v-for =" e in list " :title =" e.title " :name =" e.name " :key =" e.name " >
< div > {{e.description}} </ div >
</ el-collapse-item >
</ draggable > methods: {
handleChange ( ) {
console . log ( 'changed' ) ;
} ,
inputChanged ( value ) {
this . activeNames = value ;
} ,
getComponentData ( ) {
return {
on : {
change : this . handleChange ,
input : this . inputChanged
} ,
attrs : {
wrap : true
} ,
props : {
value : this . activeNames
}
} ;
}
}並べ替え可能なイベントのサポート:
start 、 add 、 remove 、 update 、 end 、 choose 、 unchoose 、 sort 、 filter 、 clone
onStart、onAdd、onRemove、onUpdate、onEnd、onChoose、onUnchoose、onSort、onClone が同じ引数を使用して Sortable.js によって起動されるたびに、イベントが呼び出されます。
参考までにこちらをご覧ください
SortableJS OnMove コールバックは move プロパティにマップされることに注意してください
HTML:
< draggable :list =" list " @end =" onEnd " >変更イベント
changeイベントは、リスト prop が null ではなく、対応する配列がドラッグ アンド ドロップ操作によって変更された場合にトリガーされます。
このイベントは、次のプロパティのいずれかを含む 1 つの引数を使用して呼び出されます。
added : 配列に追加された要素の情報が含まれますnewIndex : 追加された要素のインデックスelement : 追加された要素removed : 配列から削除された要素の情報が含まれますoldIndex : 削除前の要素のインデックスelement : 削除された要素moved : 配列内で移動された要素の情報が含まれますnewIndex : 移動された要素の現在のインデックスoldIndex : 移動された要素の古いインデックスelement : 移動された要素制限事項: ヘッダー スロットもフッター スロットも、transition-group と連動して機能しません。
headerスロットを使用して、vuedraggable コンポーネント内にドラッグ不可能な要素を追加します。重要: ドラッグ可能な要素にタグを付けるには、ドラッグ可能なオプションと組み合わせて使用する必要があります。ヘッダー スロットは、テンプレート内の位置に関係なく、常にデフォルト スロットの前に追加されることに注意してください。元：
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
</ div >
< button slot =" header " @click =" addPeople " > Add </ button >
</ draggable > footerスロットを使用して、vedraggable コンポーネント内にドラッグ不可能な要素を追加します。重要: ドラッグ可能な要素にタグを付けるには、ドラッグ可能なオプションと組み合わせて使用する必要があります。フッター スロットは、テンプレート内の位置に関係なく、常にデフォルト スロットの後に追加されることに注意してください。元：
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
</ div >
< button slot =" footer " @click =" addPeople " > Add </ button >
</ draggable >Vue.draggable の子は常に v-for ディレクティブを使用してリストまたは値プロパティをマップする必要があります
v-for 内の子要素は、Vue.js の他の要素と同様にキー設定される必要があります。特に関連性のあるキー値を指定するように注意してください。
ドラッグ可能な例
ここを参照
