你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

web前端之拖拽API、上传多图片时拖拽排序、表格行或列拖拽排序、复制元素跨区域放置、拖放、投掷、若依、vuedraggable、sortablejs、element、plus、vue、ui_vue 下载snail插件命令

作者：你好赵伟 | 2024-02-15 14:44:43

踩

vue 下载snail插件命令

vue3+element-plus+table+sortablejs实现行或列的拖拽
web前端之实现拖拽放置、复制元素
vue2+html5+原生dom+原生JavaScript实现跨区域拖放
vue+element实现跨区域复制拖放
vue2实现跨区域拖放
vue2+mousedown实现全屏拖动，全屏投掷
vue+element+vuedraggable实现拖拽排序
vue3+element-plus+vuedraggable实现图片上传拖拽排序(若依)
vue2+transition-group实现拖动排序
原生拖拽排序

vue3+element-plus+table+sortablejs实现行或列的拖拽

前言

vue3+element-puls列表行、列拖拽的需求，想找一个成熟的解决方法。但发现vue3的比较少，所以就把这个分享出来，希望可以帮助到大家。vuedraggable是一款vue3的拖拽插件，基于sortable.js实现，可以用来拖拽列表、菜单、工作台、选项卡等常见的工作场景。安装的是vuedraggable@next，引入使用的是sortable.js。
npm install vuedraggable@next -S
1
yarn add vuedraggable@next
1

html

<el-row :gutter="20">
  <el-col :span="24">行拖动排序</el-col>
  <el-col class="mt_10" :span="24">
    <el-table id="idRow" :data="tableList1" :row-key="(row) => row.id" border>
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="性别" width="100" align="center">
        <template #default="scope">
          <span>{{ scope.row.sex === 0 ? "女" : "男" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age" width="100" align="center" />
    </el-table>
  </el-col>
  <el-col class="mt_68" :span="24">列拖动排序</el-col>
  <el-col class="mt_10" :span="24">
    <div class="draggable-table">
      <el-table id="idColumn" ref="refColumn" :data="tableList2" :key="keyTable" border>
        <template v-for="item in tableIColumn" :key="item.id">
          <el-table-column :label="item.label" :prop="item.prop" :width="item.width" :align="item.align" />
        </template>
      </el-table>
    </div>
  </el-col>
</el-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

表格标签一定要加上唯一值。如果没有，则数据更新，但界面没有效果。
行的唯一值 <=> :row-key="(row) => row.id"
列的唯一值 <=> :key="keyTable"
当需要在一个表内同时实现行或列拖拽时，需要把行和列的唯一值都写在el-table上才起作用。

JavaScript

import Sortable from "sortablejs";

let tableList1 = ref([
  { id: "a1", name: "何二", sex: 0, age: 18 },
  { id: "b2", name: "张三", sex: 1, age: 20 },
  { id: "c3", name: "李四", sex: 1, age: 20 },
  { id: "d4", name: "王五", sex: 0, age: 25 },
  { id: "e5", name: "赵六", sex: 1, age: 56 },
  { id: "f6", name: "田七", sex: 1, age: 35 },
]),
  tableList2 = ref([
    { id: "a1", name: "何二", sex: 0, age: 18 },
    { id: "b2", name: "张三", sex: 1, age: 20 },
    { id: "d4", name: "王五", sex: 0, age: 25 },
    { id: "e5", name: "赵六", sex: 1, age: 56 },
  ]);

// 拖动列排序
let refColumn = ref(),
  keyTable = ref(),
  tableIColumn = ref([
    { label: "姓名", prop: "name", width: "", align: "" },
    { label: "性别", prop: "sex", width: "68", align: "center" },
    { label: "年龄", prop: "age", width: "68", align: "center" },
  ]);

/**
 * 列拖动排序初始化
 */
function handleInitColumn() {
  nextTick(() => {
    let refEl = refColumn.value.$el.querySelector(".el-table__header-wrapper tr");

    Sortable.create(refEl, {
      animation: 150,
      onEnd(event) {
        const oldItem = tableIColumn.value[event.oldIndex];

        tableIColumn.value.splice(event.oldIndex, 1);
        tableIColumn.value.splice(event.newIndex, 0, oldItem);

        keyTable.value = "key" + new Date().getTime();
        nextTick(() => {
          // 因为table被强制重新绘制
          // 因此需要重新监听
          handleInitColumn();
        });
      },
    });
  });
}

/**
 * 行拖动排序初始化
 */
function handleInitRow() {
  // 要拖拽元素的父容器
  let tbody = document.querySelector("#idRow .el-table__body-wrapper tbody");

  new Sortable(tbody, {
    // 可被拖拽的子元素
    draggable: "#idRow .el-table__row",
    /**
     * 开始移动
     * @param {Object} event
     */
    onStart: function (event) {
      event.item.classList.add("b_lg01_i");
    },
    /**
     * 移动过程
     * @param {Object} event
     */
    // onMove(event) {
    //   // 设置经过的行的背景色为灰色(此方式不起作用，因为样式权重问题)
    //   event.related.classList.add("b_lg01_i");
    // },
    /**
     * 移动结束(放置)
     * @param {Object} event
     */
    onEnd({ item, newIndex, oldIndex }) {
      // 设置经过的行的背景色为灰色(此方式不起作用，因为样式权重问题)
      // item.style.backgroundColor = 'initial';

      const currRow = tableList1.value.splice(oldIndex, 1)[0];

      tableList1.value.splice(newIndex, 0, currRow);
      item.classList.remove("b_lg01_i");
    },
  });
}

nextTick(() => {
  handleInitColumn();
  handleInitRow();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

代码中的每一个nextTick都有它的用处，一个都不能少，否则有bug。

style

.b_lg01_i {
  background: linear-gradient(to top, #fffaf0, #ffdead) !important;
}

.bc_initial_i {
  background-color: initial !important;
}
1
2
3
4
5
6
7

添加lang="scss" scoped属性需谨慎，这会导致样式不起作用。

web前端之实现拖拽放置、复制元素

效果图

html

<div class="container">
    <div class="left" data-drop="move">
        <div data-effect="copy" draggable="true" class="item color1">语文</div>
        <div data-effect="copy" draggable="true" class="item color2">数学</div>
        <div data-effect="copy" draggable="true" class="item color3">英语</div>
        <div data-effect="copy" draggable="true" class="item color4">音乐</div>
        <div data-effect="copy" draggable="true" class="item color5">政治</div>
        <div data-effect="copy" draggable="true" class="item color6">历史</div>
        <div data-effect="copy" draggable="true" class="item color7">体育</div>
    </div>

    <div class="right">
        <table border>
            <colgroup>
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
            </colgroup>
            <thead>
                <tr>
                    <td>课表</td>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                    <th>星期六</th>
                    <th>星期天</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="3" class="span">上午</th>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <th rowspan="4" class="span">下午</th>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

JavaScrip

const container = document.querySelector('.container');
// 移动的元素
let source = undefined;

/**
 * 移动开始
 * @param {Element} e 元素
 */
container.ondragstart = (e) => {
    // 设置鼠标样式
    e.dataTransfer.effectAllowed = e.target.dataset.effect;
    source = e.target;
}

/**
 * 移动过程
 * @param {Element} e 元素
 */
container.ondragover = (e) => {
    // 大部分标签不允许把元素放到它上面
    // 导致ondrop事件不被触发
    // 这个是阻止标签默认行为
    e.preventDefault();
}

/**
 * 当前子元素如果不存在该属性，继续寻找父元素，直到找到为止
 * @param {*} node 元素节点
 * @returns 带匹配的自定义属性的元素节点
 */
function getDropNode(node) {
    while (node) {
        if (node.dataset?.drop) return node;

        node = node.parentNode;
    }
}

/**
 * 清空背景
 */
function clearDropStyle() {
    const dropNodes = document.querySelectorAll('.drop_over');

    dropNodes.forEach((node) => {
        node.classList.remove('drop_over');
    });
}

/**
 * 移动结束
 * @param {Element} e 元素
 * @returns null
 */
container.ondragenter = (e) => {
    clearDropStyle();

    const dropNode = getDropNode(e.target);

    if (!dropNode) return false;
    if (e.dataTransfer.effectAllowed === dropNode.dataset.drop) dropNode.classList.add('drop_over');
}

/**
 * 放置时触发
 * @param {Element} e 元素
 * @returns null
 */
container.ondrop = (e) => {
    clearDropStyle();

    const dropNode = getDropNode(e.target);

    if (!dropNode) return false;
    if (e.dataTransfer.effectAllowed !== dropNode.dataset.drop) return false;
    if (dropNode.dataset.drop === 'copy') {
        dropNode.innerHTML = '';

        const cloned = source.cloneNode(true);

        cloned.dataset.effect = 'move';
        dropNode.appendChild(cloned);
    } else {
        source.remove();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

style

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    height: 268px;
    display: flex;
}

.left {
    height: 100%;
    margin-right: 5px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    background-color: #efefef;
    padding: 8px;
}

.item {
    width: 40px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.color1 {
    background-color: #e44387;
}

.color2 {
    background-color: #69f9a6;
}

.color3 {
    background-color: #e25d4b;
}

.color4 {
    background-color: #ffea60;
}

.color5 {
    background-color: #7ae5f6;
}

.color6 {
    background-color: #c55fef;
}

.color7 {
    background-color: #66fea7;
}

.right {
    height: 100%;
    margin-left: 5px;
    background-color: #efefef;
    padding: 8px;
    display: flex;
    align-items: center;
}

th {
    background-color: #afafaf;
}

td {
    width: 50px;
    height: 30px;
    text-align: center;
}

.drop_over {
    background-color: #cfcfcf;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

vue2+html5+原生dom+原生JavaScript实现跨区域拖放

关键代码

// 放
function drop(ev) {
	let data = ev.dataTransfer.getData("Text"),
		i = ev.path[1].getAttribute("i"),
		text = document.getElementById(data).cloneNode(true).innerText.trim();

	if (i == null) return alert('请放置在文件名上');
	if (app.fileS[i].divs.includes(text)) return alert('不能放重复数据');
	app.fileS[i].divs.push(text);
	for (let is = 0; is < app.fileS.length; is++) {
		if (i == is) {
			app.fileS[is].isShow = true;
		} else {
			app.fileS[is].isShow = false;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

完整代码

gitee(码云) - mj01分支 - copyDragAndDrop 文件

vue+element实现跨区域复制拖放

html部分

<div id="app">
	<div style="margin-left: 60px;">
        <!-- 放置的数据 -->
        <div>
            <!-- 自定义标签属性 :i=`${i}` ondrop 函数获取的是对应的放置标签属性 -->
            <div style="margin: 20px 0; padding: 12px 0;" v-for="(item, i) in fileS" :key="item.id" :i=`${i}`
                ondrop="drop(event)" ondragover="allowDrop(event)">
                <div style="font-weight: 700; cursor: pointer;" :i=`${i}` @click="openOff(i)">
                    <span :i=`${i}`>{{item.title}}</span>
                    <span style="cursor: pointer;" :i=`${i}` v-show="item.isShow">▲</span>
                    <span style="cursor: pointer;" :i=`${i}` v-show="!item.isShow">▼</span>
                </div>

                <div :i=`${i}` v-if="item.isShow">
                    <p :i=`${i}` style="padding: 6px 0; color: #777;" v-for="items in item.divs" :key="items">
                        <span :i=`${i}`>{{items}}</span>
                        <span :i=`${i}` style="padding-left: 10px; cursor: pointer;">×</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- 源数据 -->
        <div style="margin-top: 20px; border-top: 1px solid #333;">
            <div style="margin-top: 10px; cursor: pointer; color: #000;" v-for="item in 7" :id=`drag${item}`
                draggable="true" ondragstart="drag(event)">
                源数据 {{item}}</div>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

JavaScript部分

let app = new Vue({
    el: "#app",
    data() {
        return {
            fileS: [
                { id: 1, title: "文件夹1", divs: [], isShow: false },
                { id: 2, title: "文件夹2", divs: [], isShow: false },
                { id: 3, title: "文件夹3", divs: [], isShow: false }
            ]
        }
    },

    methods: {
        openOff(i) {
            for (let is = 0; is < this.fileS.length; is++) {
                if (i == is && !this.fileS[is].isShow) {
                    this.fileS[is].isShow = true;
                } else {
                    this.fileS[is].isShow = false;
                }
            }
        }
    }
});

// 移动
function allowDrop(ev) {
    ev.preventDefault();
}

// 拖
function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

// 放
function drop(ev) {
    let data = ev.dataTransfer.getData("Text"),
        i = ev.path[1].getAttribute("i"),
        text = document.getElementById(data).cloneNode(true).innerText.trim();

    if (i == null) return alert('请放置在文件名上');
    if (app.fileS[i].divs.includes(text)) return alert('不能放重复数据');
    app.fileS[i].divs.push(text);
    for (let is = 0; is < app.fileS.length; is++) {
    	app.fileS[is].isShow = i === is ? true : false;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

vue2实现跨区域拖放

关键代码

dragend(item) {
	console.log(item);
	if (this.oldItem != this.newItem) {
		let oldIndex = this.List.indexOf(this.oldItem);
		let newIndex = this.List.indexOf(this.newItem);

		let oldflag = false
		let newflag = false

		if (oldIndex === -1) {
			oldflag = true
			oldIndex = this.list.indexOf(this.oldItem);
		}

		if (newIndex === -1) {
			newflag = true
			newIndex = this.list.indexOf(this.newItem);
		}

		let newList = [...this.List]; // 中间数组，用于交换两个节点
		let newlist = [...this.list]; // 中间数组，用于交换两个节点

		if (!oldflag) {
			newList.splice(oldIndex, 1);
		} else {
			newlist.splice(oldIndex, 1);
		}

		if (!newflag) {
			newList.splice(newIndex, 0, this.oldItem);
		} else {
			newlist.splice(newIndex, 0, this.oldItem);
		}

		// 删除老的节点
		// newList.splice(oldIndex, 1);
		// // 在列表目标位置增加新的节点
		// newList.splice(newIndex, 0, this.oldItem);
		// // 更新this.List，触发transition-group的动画效果
		this.List = [...newList];
		this.list = [...newlist];
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

完整代码

gitee(码云) - mj01分支 - dragAndDrop 文件

vue2+mousedown实现全屏拖动，全屏投掷

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标滑动</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
	<div id="app">
        <div class="ctn ctn1">
            <div class="sub sub1" v-for="(site, index) in list1">
                <div class="dragCtn fixed" @mousedown="mousedown(site, $event)"
                    @mousemove.prevent='mousemove(site, $event)' @mouseup='mouseup(site, $event)'>
                    {{ site.name }}
                </div>
            </div>
        </div>
        <div class="ctn ctn2">
            <div class="sub sub2" v-for="(site, index) in list2">
                <div class="dragCtn">
                    {{ index }} : {{ site.name }}
                </div>
            </div>
        </div>
    </div>

    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="./index.js"></script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

JavaScript

new Vue({
    el: '#app',
    data: {
        list1: [{ name: '拖动我', index: 0 }],
        list2: [{ name: 'a', index: 0 }, { name: 'b', index: 1 }, { name: 'c', index: 2 }, { name: 'd', index: 3 }],
        vm: '',
        sb_bkx: 0,
        sb_bky: 0,
        is_moving: false
    },
    methods: {
        mousedown: function (site, event) {
            var startx = event.x;
            var starty = event.y;
            this.sb_bkx = startx - event.target.offsetLeft;
            this.sb_bky = starty - event.target.offsetTop;
            this.is_moving = true;
        },
        mousemove: function (site, event) {
            var endx = event.x - this.sb_bkx;
            var endy = event.y - this.sb_bky;
            var _this = this
            if (this.is_moving) {
                event.target.style.left = endx + 'px';
                event.target.style.top = endy + 'px';
            }
        },
        mouseup: function (e) {
            this.is_moving = false;
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

css

.ctn {
    line-height: 50px;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
    float: left;
}

.sub:hover {
    background: #e6dcdc;
    color: white;
    width: 100px;
}

.ctn1 {
    border: 1px solid green;
    width: 100px;
}

.ctn2 {
    border: 1px solid black;
    width: 100px;
    margin-left: 50px;
}

.fixed {
    width: 100px;
    height: 100px;
    position: fixed;
    background: red;
    left: 10px;
    top: 10px;
    cursor: move;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

vue+element+vuedraggable实现拖拽排序

使用yarn add vuedraggable或者npm i -S vuedraggable安装拖拽组件。

<draggable
	v-model="codeList"
	@update="datadragEnd"
	:options="{ animation: 200 }"
>
	<div class="drag-item" v-for="(item, i) in codeList" :key="i">
	<el-row>
		<el-col class="line" :span="6">&nbsp;{{ item.field_title }}</el-col>
	</el-row>
	</div>
</draggable>
1
2
3
4
5
6
7
8
9
10
11

import draggable from "vuedraggable";

async datadragEnd(evt) {
	evt.preventDefault();
	// console.log('拖动前的索引 :' + evt.oldIndex)
	// console.log('拖动后的索引 :' + evt.newIndex)
	// 遍历数组，将索引值赋值到对应的 sort_order上面，完成排序
	let arr = this.codeList;
	let newArr = await arr.map((item, i) => {
		return {
			sort_order: i,
			field_code: item.field_code,
		};
	});
	const res = await this.$axios.post(`customer/save_order`, {
		list: newArr,
	});
	// console.log(res);
	const { error, message } = res.data;
	if (error == 0) {
		this.$message.success(message);
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

vue3+element-plus+vuedraggable实现图片上传拖拽排序(若依)

前言

安装对应的vuedraggable组件
npm install vuedraggable@4.1.0 --save
package.json文件中记录对应的版本号为: "vuedraggable": "4.1.0"，这里要注意咯！！！克隆项目的时候这里的4.1.0可能会变为^4.1.0，一定要改为4.1.0；如果不是可以先卸载然后安装正确的版本即可。
如果版本不对会报错，并且不能运行。

本案例基于若依vue3前后端分离项目做二次开发
若依自带二次封装element-plus图片上传组件，但是没有实现拖拽排序功能。
于是又自己封装了一个ImageUploadDraggable图片上传组件，此组件基于若依自带的图片上传组件的基础上进行再次封装。
组件正常引入即可，可以全局引入或局部引入，引入方式跟我们自定的组件一样。

html

<el-form-item label="图片" class="ws_n">
  <image-upload-draggable v-model="dialogForm.images" :limit="5">
  </image-upload-draggable>
</el-form-item>
1
2
3
4

JavaScript

let info = reactive({
    dialogForm: {
      // 图片
      images: []
    }
  }),
  {
    dialogForm
  } = toRefs(info);
1
2
3
4
5
6
7
8
9

二次封装上传组件

<template>
  <div class="component-upload-image">
    <ul class="el-upload-list el-upload-list--picture-card">
      <vue-draggable-next v-model="fileList">
        <li v-for="(item, index) in fileList" :key="item.index" class="el-upload-list__item is-success animated">
          <img :src="item.url" alt="" class="el-upload-list__item-thumbnail" />
          <i class="el-icon-close"></i>
          <span class="el-upload-list__item-actions">
            <!-- 预览 -->
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreviewFileDetail(item)">
              <el-icon>
                <zoom-in></zoom-in>
              </el-icon>
            </span>
            <!-- 删除 -->
            <span class="el-upload-list__item-delete" @click="handleRemoveFileDetail(index)">
              <el-icon>
                <delete></delete>
              </el-icon>
            </span>
          </span>
        </li>
      </vue-draggable-next>
    </ul>
    <el-upload multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
      ref="imageUpload" :show-file-list="false" :headers="headers" :class="{ hide: fileList.length >= limit }">
      <el-icon class="avatar-uploader-icon">
        <plus />
      </el-icon>
    </el-upload>
    <!-- 上传提示 -->
    <div class="el-upload__tip" v-if="showTip">
      请上传
      <template v-if="fileSize">
        大小不超过
        <b style="color: #f56c6c">{{ fileSize }}MB</b>
      </template>
      <template v-if="fileType">
        格式为
        <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
      </template>
      的文件
    </div>

    <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
    </el-dialog>
  </div>
</template>

<script setup>
import { VueDraggableNext } from "vue-draggable-next";
import { getToken } from "@/utils/auth";

const props = defineProps({
  modelValue: [String, Object, Array],
  // 图片数量限制
  limit: {
    type: Number,
    default: 5,
  },
  // 大小限制(MB)
  fileSize: {
    type: Number,
    default: 5,
  },
  // 文件类型, 例如['png', 'jpg', 'jpeg']
  fileType: {
    type: Array,
    default: () => ["png", "jpg", "jpeg"],
  },
  // 是否显示提示
  isShowTip: {
    type: Boolean,
    default: true,
  },
});

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const number = ref(0);
const uploadList = ref([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
// 上传的图片服务器地址
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/file/upload");
const headers = ref({
  Authorization: "Bearer " + getToken(),
  appid: import.meta.env.VITE_APP_ID,
});
const fileList = ref([]);
const showTip = computed(
  () => props.isShowTip && (props.fileType || props.fileSize)
);

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      // 首先将值转为数组
      const list = Array.isArray(val) ? val : props.modelValue.split(",");
      // 然后将数组转为对象数组
      fileList.value = list.map((item) => {
        if (typeof item === "string") {
          item = { name: item, url: item };
        }
        return item;
      });
    } else {
      fileList.value = [];
      return [];
    }
  },
  { deep: true, immediate: true }
);

// 上传前loading加载
function handleBeforeUpload(file) {
  let isImg = false;
  if (props.fileType.length) {
    let fileExtension = "";
    if (file.name.lastIndexOf(".") > -1) {
      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
    }
    isImg = props.fileType.some((type) => {
      if (file.type.indexOf(type) > -1) return true;
      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
      return false;
    });
  } else {
    isImg = file.type.indexOf("image") > -1;
  }
  if (!isImg) {
    proxy.$modal.msgError(
      `文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
    );
    return false;
  }
  if (props.fileSize) {
    const isLt = file.size / 1024 / 1024 < props.fileSize;
    if (!isLt) {
      proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
      return false;
    }
  }
  proxy.$modal.loading("正在上传图片，请稍候...");
  number.value++;
}

// 文件个数超出
function handleExceed() {
  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
}

// 上传成功回调
function handleUploadSuccess(res, file) {
  if (res.code === 0) {
    uploadList.value.push({ name: res.data.url, url: res.data.url });
    uploadedSuccessfully();
  } else {
    number.value--;
    proxy.$modal.closeLoading();
    proxy.$modal.msgError(res.msg);
    proxy.$refs.imageUpload.handleRemove(file);
    uploadedSuccessfully();
  }
}

function handlePictureCardPreviewFileDetail(file) {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
}

// 删除
function handleRemoveFileDetail(index) {
  fileList.value.splice(index, 1);
}

// 上传结束处理
function uploadedSuccessfully() {
  if (number.value > 0 && uploadList.value.length === number.value) {
    fileList.value = fileList.value
      .filter((f) => f.url !== undefined)
      .concat(uploadList.value);
    uploadList.value = [];
    number.value = 0;
    emit("update:modelValue", listToString(fileList.value));
    proxy.$modal.closeLoading();
  }
}
// 上传失败
function handleUploadError() {
  proxy.$modal.msgError("上传图片失败");
  proxy.$modal.closeLoading();
}

// 对象转成指定字符串分隔
function listToString(list, separator) {
  let strs = "";
  separator = separator || ",";
  for (let i in list) {
    if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
      strs += list[i].url.replace(baseUrl, "") + separator;
    }
  }
  return strs != "" ? strs.substr(0, strs.length - 1) : "";
}
</script>

<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
:deep(.hide .el-upload--picture-card) {
  display: none;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

vue2+transition-group实现拖动排序

html

<transition-group id='app' name="drog" tag="ul">
	<div draggable="true" v-for="(item, index) in lists" @dragstart="dragStart($event, index)" @dragover="allowDrop" @drop="drop($event, index)" v-bind:key="item">{{item}}</div>
</transition-group>
1
2
3

JavaScript

new Vue({
    el: '#app',
    data: {
        lists: ['1: apple', '2: banana', '3: orange', '4: melon']
    },
    
	methods: {
        // 取消默认行为
        allowDrop(e){
            e.preventDefault();
        },
        
        // 开始拖动
        dragStart(e, index){
            let tar = e.target;
            e.dataTransfer.setData('Text', index);
            if (tar.tagName.toLowerCase() == 'li') {
                // console.log('drag start')
                // console.log('drag Index: ' + index)
            }
        },
        
        // 放置
        drop(e, index){
            this.allowDrop(e);
            // console.log('drop index: ' + index);
            //使用一个新数组重新排序后赋给原变量
            let arr = this.lists.concat([]),
                dragIndex = e.dataTransfer.getData('Text');
                temp = arr.splice(dragIndex, 1);
            arr.splice(index, 0, temp[0]);
            // console.log('sort');
            this.lists = arr;
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

原生拖拽排序

html

<ul id="idUl">
    <li class="m_36 ta_c bc_87ceeb fs_68">1</li>
    <li class="m_36 ta_c bc_87ceeb fs_68">2</li>
    <li class="m_36 ta_c bc_87ceeb fs_68">3</li>
    <li class="m_36 ta_c bc_87ceeb fs_68">4</li>
    <li class="m_36 ta_c bc_87ceeb fs_68">5</li>
</ul>
1
2
3
4
5
6
7

JavaScript

(function () {
    let ulList = document.querySelector('#idUl'),
        liList = document.querySelectorAll('li'),
        currentLi = undefined;

    liList.forEach(item => item.draggable = "true");

    ulList.addEventListener('dragstart', (e) => {
        e.dataTransfer.effectAllowed = 'move';
        currentLi = e.target;

        setTimeout(() => currentLi.classList.add('bc_transparent color_transparent'), 0);
    });
    ulList.addEventListener('dragenter', (e) => {
        e.preventDefault();

        if (e.target === currentLi || e.target === ulList) return false;

        let liArray = Array.from(ulList.childNodes),
            currentIndex = liArray.indexOf(currentLi),
            targetindex = liArray.indexOf(e.target)

        if (currentIndex < targetindex) {
            ulList.insertBefore(currentLi, e.target.nextElementSibling);
        } else {
            ulList.insertBefore(currentLi, e.target);
        }
    });
    ulList.addEventListener('dragover', (e) => e.preventDefault());
    ulList.addEventListener('dragend', (e) => currentLi.classList.remove('bc_transparent color_transparent'));
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/85082

web前端之拖拽API、上传多图片时拖拽排序、表格行或列拖拽排序、复制元素跨区域放置、拖放、投掷、若依、vuedraggable、sortablejs、element、plus、vue、ui_vue 下载snail插件 命令

MENU

vue3+element-plus+table+sortablejs实现行或列的拖拽

web前端之实现拖拽放置、复制元素

vue2+html5+原生dom+原生JavaScript实现跨区域拖放

vue+element实现跨区域复制拖放

vue2实现跨区域拖放

vue2+mousedown实现全屏拖动，全屏投掷

vue+element+vuedraggable实现拖拽排序

vue3+element-plus+vuedraggable实现图片上传拖拽排序(若依)

vue2+transition-group实现拖动排序

原生拖拽排序

web前端之拖拽API、上传多图片时拖拽排序、表格行或列拖拽排序、复制元素跨区域放置、拖放、投掷、若依、vuedraggable、sortablejs、element、plus、vue、ui_vue 下载snail插件命令