Vue3 でのリストのドラッグ アンド ドロップの並べ替え

プログラミング 2023-07-01 19:12:07 訪問数: null

この文書の主な内容は 3 つの部分に分かれています。HTML5まず、属性を使ってdraggableリストをドラッグして並べ替える機能をVue3で手書きで書きました。次に、Element Plusコンポーネント ライブラリsortable.jsと組み合わせて、テーブル コンポーネントをel-tableドラッグして並べ替える方法を記録します。最後の部分は、vuedraggableドラッグ アンド ドロップ コンポーネントの使用です。

この記事はVite、 、Vue3、Element Plusテクノロジー スタックに基づいています

ドラッグ可能はドラッグアンドドロップソートを実装します

プロパティとイベント

draggable属性は、HTML5 の新しいドラッグ可能な属性です。

HTML では、デフォルトでドラッグ可能な画像、リンク、および選択したテキストを除き、他の要素はデフォルトではドラッグできません。draggable他の要素をドラッグ可能にしたい場合は、まずプロパティを に設定する必要がありますtrue。

<p draggable="true"> 可拖拽</p>
复制代码

設定が完了したら、ドラッグ アンド ドロップを完了するためにいくつかのイベントを組み合わせる必要があります。

  • 要素をドラッグするためのイベント
イベント トリガータイミング
dragstart ドラッグ開始時に1回実行
drag ドラッグ開始後に複数回トリガーされる
dragend ドラッグ後に 1 回トリガーされる
  • ターゲットをドロップできるイベント
イベント トリガータイミング
dragenter 要素をドロップ可能なターゲットにドラッグするときに 1 回実行されます。
dragover 要素をドロップ可能なターゲットにドラッグするときに複数回トリガーされます (100 ミリ秒ごとに 1 回)
drop ドラッグされた要素がドロップ可能なターゲットに解放されたとき (このイベントは、ドラッグオーバーが設定されている場合にのみ有効になります)

配置可能なターゲット

dragenter または dragoverイベントを使用して、ドラッグされた要素がドロップされる有効なドロップ ターゲットを示すことができます。

配置を許可する設定では、  イベントのブロックdragenter と デフォルトの処理も必要になります。dragover

<div ondragenter="event.preventDefault()">
复制代码

理解するために例を作成します可放置目标。

データ転送オブジェクト

DataTransfer このオブジェクトは、ドラッグ プロセス中のデータの保存、ドラッグ タイプの設定などに使用されます。オブジェクトは、すべてのドラッグ イベント eventの dataTransfer プロパティで取得できますDataTransfer。

  • dataTransfer.dropEffect设置拖拽的操作类型。值必须是none, copy, link 或 move。
function dragover(e) {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
}
复制代码
  • 传递数据 （不建议使用这种方法，可能有兼容问题）只能在drop事件中接收（测试的时候在其他拖拽事件中获取不到）
function dragstart(e, index) {
	e.stopPropagation()
	e.dataTransfer.dropEffect = 'move'
        // 传数据
	e.dataTransfer.setData('text/plain', '111111111')
}
function drop(e) {
        // 接收数据
	console.log(e.dataTransfer.getData('text/plain'));
}
复制代码

Vue3 中拖拽排序

根据上面描述的属性和事件在 Vue3 编写一个拖拽排序的列表大概分下面几个步骤：

  1. 创建一个列表，遍历渲染到页面
  2. 列表项添加 draggable="true"
  3. 列表项添加事件 dragstart dragenter dragend dragover
  4. 在 dragenter 事件中，需要传入列表项的下标，实时进行元素的排序。排序的核心逻辑也是在 dragenter 中
  5. 代码执行的逻辑是：列表项拖拽到可放置目标时，将该拖拽的元素从原位置删除，再将拖拽的元素插入到当前可放置目标的位置

代码如下：

<template>
    <div>
            <div
                class="item"
                v-for="(item, i) in drag.list"
                :key="item.id"
                draggable="true"
                @dragstart="dragstart($event, i)"
                @dragenter="dragenter($event, i)"
                @dragend="dragend"
                @dragover="dragover"
               >
                {{ item.name }}
            </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
const drag = reactive({
	list: [
		{ name: 'a', id: 1 },
		{ name: 'b', id: 2 },
		{ name: 'c', id: 3 },
		{ name: 'd', id: 4 },
		{ name: 'e', id: 5 },
	]
})

let dragIndex = 0

function dragstart(e, index) {
	e.stopPropagation()
	dragIndex = index
	setTimeout(() => {
		e.target.classList.add('moveing')
	},0)
}
function dragenter(e, index) {
	e.preventDefault()
	// 拖拽到原位置时不触发
	if (dragIndex !== index) {
		const source = drag.list[dragIndex];
		drag.list.splice(dragIndex, 1);
		drag.list.splice(index, 0, source);

		// 更新节点位置
		dragIndex = index
	}
}
function dragover(e) {
	e.preventDefault()
	e.dataTransfer.dropEffect = 'move'
}
function dragend(e) {
	e.target.classList.remove('moveing')
}
</script>

<style lang="scss" scoped>
.item {
	width: 200px;
	height: 40px;
	line-height: 40px;
	// background-color: #f5f6f8;
	background-color: skyblue;
	text-align: center;
	margin: 10px;
	color: #fff;
	font-size: 18px;
}

.container {
  position: relative;
  padding: 0;
}

.moveing {
	opacity: 0;
}
</style>
复制代码

此时是这样的效果：

动画.gif

这样就在 Vue3 中实现了拖拽排序。还可以利用 Vue 的<TransitionGroup> 内置组件，添加动画效果，让元素的过渡不会很生硬。

添加代码：

<template>
<div>
	<TransitionGroup name="list" tag="div" class="container">
		<div
			class="item"
			v-for="(item, i) in drag.list"
			:key="item.id"
			draggable="true"
			@dragstart="dragstart($event, i)"
			@dragenter="dragenter($event, i)"
			@dragend="dragend"
			@dragover="dragover"
		>
			{{ item.name }}
		</div>
	</TransitionGroup>
</div>
</template>

<style lang="scss" scoped>
    .list-move, /* 对移动中的元素应用的过渡 */
    .list-enter-active,
    .list-leave-active {
        transition: all 0.2s ease;
    }
</style>
复制代码

效果如下：

222.gif

sortable.js

接下来在 Element Plus 组件库中使用 sortable.js 进行表格排序。

Element Plus 是基于 Vue3 的常用的开源组件库

安装 sortable.js

npm i sortablejs -S
复制代码

使用 el-table 组件，写一个表格：

<template>
<div>
        <el-table :data="tableData" id="dragTable" border style="width: 800px;">
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
        </el-table>
</div>
</template>

<script setup>
const tableData = [
	{
		date: '2016-05-03',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		date: '2016-05-02',
		name: 'Cilly',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		date: '2016-05-04',
		name: 'Linda',
		address: 'No. 189, Grove St, Los Angeles',
	},
	{
		date: '2016-05-01',
		name: 'John',
		address: 'No. 189, Grove St, Los Angeles',
	},
]
</script>
复制代码

现在就有了一个表格：

捕获.PNG

然后导入 sortable.js：

<script setup>
import Sortable from 'sortablejs'
import { onMounted } from 'vue'

function setSort() {
    const el = document.querySelector('#dragTable table tbody')
    new Sortable(el, {
    sort: true,
		ghostClass: 'sortable-ghost',
		onEnd: (e) => {
			const targetRow = tableData.splice(e.oldIndex, 1)[0]
			tableData.splice(e.newIndex, 0, targetRow)
			console.log(tableData)
		},
	})
}
onMounted(() => {
	setSort()
})

const tableData = [
 // ...
]
</script>
复制代码

在 onMounted 中，也就是组件挂载完成之后，实例化 Sortable()，传入要进行拖拽排序的节点 el 和其它一些配置参数。现在可以进行拖拽了。

333.gif

有些时候，可能需要按住拖动图标才可以进行拖动，需要添加 handle 配置，并指定对应的样式名。

    <el-table :data="tableData" id="dragTable" border style="width: 600px; margin: 20px">
      <!-- ...... 省略代码 -->
      <el-table-column label="操作" width="100">
        <template #default>
          <div class="handle-drag">
            <el-icon>
              <Sort />
            </el-icon>
          </div>
        </template>
      </el-table-column>
    </el-table>
复制代码

上面代码将表格添加了一个操作列，并将操作列的图标设置一个样式类。下面的配置表示只有包含.handle-drag 样式的元素才可以被拖动。其他位置不能被拖动。

  new Sortable(el, {
    // ...
    handle: '.handle-drag',
    // ...
  })
复制代码

444.gif

查看其他配置项

vuedraggable

vue.draggable.next 是 Vue3 的拖拽组件，是基于 Sortable.js 实现的。可以用于拖拽列表、菜单、工作台、选项卡等常见的场景。

安装：

npm i -S vuedraggable@next
复制代码

使用：

<script setup>
import draggable from 'vuedraggable'
import { reactive } from 'vue'

const state = reactive({
	list1: [1, 2, 3, 4],
	list2: ['a', 'b', 'c', 'd'],
})

function onStart() {}

function onEnd() {
	console.log(state)
}

</script>
复制代码

先导入 draggable并定义一些基础数据。

<template>
	<div style="margin-left: 30px;">
		<draggable
			:list="state.list1"
			:force-fallback="true"
			chosen-class="chosen"
			animation="300"
			@start="onStart"
			@end="onEnd"
		>
			<template #item="{ element }">
				<div class="item">
					{{ element }}
				</div>
			</template>
		</draggable>
	</div>
</template>
复制代码

其中 @start 和 @end 为拖拽开始和结束时的事件。chosen-class 为拖拽时的样式。

555.gif

为组件设置相同的 group 属性，可以实现在不同的块之间拖拽。

		<draggable group="group" :list="state.list1" >
			<template #item="{ element }">
				<div class="item bck1">
					{{ element }}
				</div>
			</template>
		</draggable>

		<draggable group="group" :list="state.list2" >
			<template #item="{ element }">
				<div class="item bck2">
					{{ element }}
				</div>
			</template>
		</draggable>
复制代码

666.gif

相关地址

おすすめ

転載: juejin.im/post/7231519213897875512
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com