vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文: ドラッグ アンド ドロップ ソート機能を実装するプラグインやメソッドは市場に数多くあります。 このセクションでは詳細には触れず、1 つのメソッド、つまり CSS3 の transition-group メソッドについてのみ説明します。 効果画像: 1. DOMでの使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="customApps 内のアプリ" :key="app.id" :draggable="true" @dragstart="dragstart(アプリ)" @dragenter="dragenter(アプリ、$イベント)" @dragend="getDragend(customApps, '顧客', $event)"> <div> <img class="icon_a" v-if="app.logo" :src="app.logo" > <div class="ellipsis" >{{app.name}}</div> </div> </div> </トランジショングループ> 2. データ内のデータを定義する '@/api/enterpriseAPi' から { APi } をインポートします。 <スクリプト> エクスポートデフォルト{ データ() { 戻る { 古いデータ: [], 新しいデータ: [], カスタムアプリ: [], ドラッグ開始ID: ''、 ドラッグ終了ID: '' } } } </スクリプト> 3. メソッド内での使用 ドラッグスタート(値) { this.oldData = 値 this.dragStartId = 値.id }, ドラジェンター(値) { this.newData = 値 this.dragEndId = 値.id }, getDragend(リストデータ、タイプ) { (this.oldData !== this.newData) の場合 { oldIndex = listData.indexOf(this.oldData) とします。 newIndex = listData.indexOf(this.newData) とします。 newItems = [...listData] とします // 前のDOMノードを削除します newItems.splice(oldIndex, 1) // ドラッグ ターゲットの末尾に新しい DOM ノードを追加します。newItems.splice(newIndex, 0, this.oldData) // 各ドラッグが完了すると、ドラッグによって処理されたデータが元の配列に割り当てられ、DOM ビューが更新され、ページにドラッグ アニメーションが表示されます。this.customApps = newItems // ドラッグが終了するたびにデータを保存するインターフェースを呼び出します Api(this.dragStartId, this.dragEndId).then((res) => {}) } }, ドラッグ完了アニメーションスタイル: <style lang="scss" スコープ> .sort-move { 遷移: 1 秒を変換します。 } </スタイル> これで、vue を使用してページ上の div ボックスのドラッグ アンド ソート機能を実装する方法についての記事は終了です。vue div ボックスのドラッグ アンド ソートに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: css input[type=file] スタイルの美化 (入力アップロードファイルスタイル)
>>: MySQL における楽観的ロック、悲観的ロック、MVCC の包括的な分析
主にインストール後に my.ini ファイルを確認するために、msi 形式でインストールしました。フ...
日付型の違いと用途MySQL には、日付、時刻、年、日付時刻、タイムスタンプの 5 つの日付タイプが...
目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...
XHTML は CSS レイアウトの基礎です。jb51.net は常に XHTML 知識の習得を重視...
目次これを Vue.$store.state.xx.xxストアからデータを取得する私のプロジェクトフ...
前回の記事では、Docker を使用して、コンパイルされた jar パッケージをイメージに組み込む ...
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
Raspberry Pi モデルは 4b、1G RAM です。システムはubuntu19.10サーバ...
この記事の例では、参考までに簡単な計算機を実装するためのJavaScriptの具体的なコードを共有し...
序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...
Docker Swarm は、Docker によって開発されたコンテナ クラスター管理サービスです。...
Linuxでyumを入力すると、プロンプトが表示されます: -bash: /usr/bin/yum:...
序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...
必要な環境をインストールする1. gccのインストールnginx をインストールするには、公式サイト...
ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...