vue-slicksort vue.js ドラッグ アンド ドロップ コンポーネント

この記事では主に、強力なドラッグ可能な vue.js コンポーネントである vue-slicksort について説明します。 自動的にスクロールしたり、座標系をロックしたりできます。ドラッグ時のスムーズなアニメーション効果をサポートします。水平、垂直、またはグリッドのドラッグをサポートできます。タッチをサポートします。この記事が皆さんのお役に立てれば幸いです。

デモ

インストール

npm経由でインストール

$ npm install vue-slicksort --save

yarn経由でインストール

$ yarn add vue-slicksort

プラグインアプリケーション

コンポーネントを導入

// Using an ES6 transpiler like Babel
import {ContainerMixin, ElementMixin} from 'vue-slicksort';

// Not using an ES6 transpiler
var slicksort = require('vue-slicksort');
var ContainerMixin = slicksort.ContainerMixin;
var ElementMixin = slicksort.ElementMixin;

参照

rr vue ファイル内にこのような reee

コンポーネントを追加します。

プロパティ	タイプ	デフォルト	説明
値	配列	-	リストの内容
axis	String	y	List要素は水平ドラッグ、垂直ドラッグ、またはグリッドドラッグ。 x、y、xyで表されます。
lockAxis	String	-	並べ替え時に座標系内の要素の動きをロックするために使用されます
helperClass	String	-	ヘルパーのカスタムスタイルクラス
移行期間	Number	300	要素の移動アニメーションの継続時間
pressDelay	Number	0	要素が一定時間押されたときにドラッグを許可する必要がある場合は、この属性を設定できます
pressThreshold	Number	5	動きを無視できるしきい値、単位はピクセルです
距離	Number	0	要素の前に特定の距離をドラッグする必要がある場合ドラッグされていると認識される場合、このプロパティを設定できます
useDragHandle	Boolean	false	HandleDirectiveを使用する場合は、trueに設定してください
useWindowAsScrollContainer	Boolean	false	ウィンドウを設定するかどうかスクロール可能なコンテナーに設定するかどうか
hideSortableGhost	Boolean	false	ウィンドウをスクロール可能なコンテナとして設定するかどうか
useWindowAsScrollContainer	Boolean	tru​​e	かゴースト要素を自動的に非表示にします
lockToContainerEdges	Boolean	false	ドラッグされた要素がコンテナの端をロックするかどうか
lockOffset	String	50%	コンテナの端をロックするためのドラッグされた要素のオフセット
shouldCancelStart	Function	-	ドラッグの開始時にこのメソッドは
getHelperDimensions	Function	-	オプションのメソッド ({node, Index, collection}) を返す前に呼び出されます。 SortableHelper

ホイールファクトリーの計算された寸法 - a share vue と angular の優れたコンポーネントを備えた Web サイト。

関連する推奨事項:

JS ドラッグ アンド ドロップ コンポーネントの使い方を学ぶ_JavaScript スキル

以上がvue-slicksort vue.js ドラッグ アンド ドロップ コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。