vue项目中，兼容vue3.0 1.0 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽

前端时间写了标准宫格拖拽排序的文章

1、 2、4、9、12等等标准宫格拖拽，基于vue-grid-layout 拖拽换位无刷新

vue项目中基于vue-grid-layout开发的拖拽对换位置，九宫格拖拽排序，换位_csl125的博客-CSDN博客_vue九宫格拖拽安装：npm install vue-grid-layout --save&yarn add vue-grid-layout1、使用vue-grid-layout开发的一款拖拽排序，项目拖走其他自动挤进一效果如下：代码如下：<template> <grid-layout :layout="layout" :auto-size="false" :col-num="3" :row-height="100"https://csl812.blog.csdn.net/article/details/118737842 2、vue2&1版本，六宫格拖拽五小一大拖拽排序

vue项目中五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序_csl125的博客-CSDN博客背景：项目中用到1、4、6、9、12、16宫格排序，拖拽换位等场景，项目是监控的视频矩阵，用户矩阵拖拽排序换位，之前已经实现1、4、9、12、16等矩阵式排列的拖拽排序，但是六宫格要求五小一大，之前的基于vue-grid-layout开发的拖拽对换位置已经实现除了五小一大的需求图：五小一大互相可以拖拽换位排序实现方案：基于vue-dragginghttps://github.com/hilongjw/vue-dragging实现六宫格拖拽，该组件也可实现1,4、6、9等需要简单修改即可.https://csl812.blog.csdn.net/article/details/122453201

在开发vue3.x项目时发现拖拽插件在vue3.x版本中不能使用，通过二开源码兼容vue3&vue2&vue1版本，使用方法如下：

一、创建文件 src/directives/vue-drag.js 复制可用

/*!* 基于 Awe-dnd v0.3.2 * 支持vue1.0 & vue2.0 & vue3.0*/
/* eslint-disable */(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :typeof define === 'function' && define.amd ? define(factory) :(global.VueDragging = factory());
}(this, (function () {'use strict';var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }var DragData = function () {function DragData() {_classCallCheck(this, DragData);this.data = {};}_createClass(DragData, [{key: 'new',value: function _new(key) {if (!this.data[key]) {this.data[key] = {className: '',List: [],KEY_MAP: {}};}return this.data[key];}}, {key: 'get',value: function get(key) {return this.data[key];}}]);return DragData;}();var $dragging = {listeners: {},$on: function $on(event, func) {var events = this.listeners[event];if (!events) {this.listeners[event] = [];}this.listeners[event].push(func);},$once: function $once(event, func) {var vm = this;function on() {vm.$off(event, on);for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}func.apply(vm, args);}this.$on(event, on);},$off: function $off(event, func) {var events = this.listeners[event];if (!func || !events) {this.listeners[event] = [];return;}this.listeners[event] = this.listeners[event].filter(function (i) {return i !== func;});},$emit: function $emit(event, context) {var events = this.listeners[event];if (events && events.length > 0) {events.forEach(function (func) {func(context);});}}};var _ = {on: function on(el, type, fn) {el.addEventListener(type, fn);},off: function off(el, type, fn) {el.removeEventListener(type, fn);},addClass: function addClass(el, cls) {if (arguments.length < 2) {el.classList.add(cls);} else {for (var i = 1, len = arguments.length; i < len; i++) {el.classList.add(arguments[i]);}}},removeClass: function removeClass(el, cls) {if (arguments.length < 2) {el.classList.remove(cls);} else {for (var i = 1, len = arguments.length; i < len; i++) {el.classList.remove(arguments[i]);}}}};var vueDragging = function (Vue, options) {// 判断vue 版本 使用对应语法var isPreVue = Vue.version.split('.')[0];// console.log("vue版本", isPreVue)var dragData = new DragData();var isSwap = false;var Current = null;function handleDragStart(e) {var el = getBlockEl(e.target);var key = el.getAttribute('drag_group');var drag_key = el.getAttribute('drag_key');var comb = el.getAttribute('comb');var DDD = dragData.new(key);var item = DDD.KEY_MAP[drag_key];var index = DDD.List.indexOf(item);var groupArr = DDD.List.filter(function (item) {return item[comb];});_.addClass(el, 'dragging');if (e.dataTransfer) {e.dataTransfer.effectAllowed = 'move';e.dataTransfer.setData('text', JSON.stringify(item));}Current = {index: index,item: item,el: el,group: key,groupArr: groupArr};}function handleDragOver(e) {if (e.preventDefault) {e.preventDefault();}return false;}function handleDragEnter(e) {var el = void 0;if (e.type === 'touchmove') {e.stopPropagation();e.preventDefault();el = getOverElementFromTouch(e);el = getBlockEl(el);} else {el = getBlockEl(e.target);}if (!el || !Current) return;var key = el.getAttribute('drag_group');if (key !== Current.group || !Current.el || !Current.item || el === Current.el) return;var drag_key = el.getAttribute('drag_key');var DDD = dragData.new(key);var item = DDD.KEY_MAP[drag_key];if (item === Current.item) return;var indexTo = DDD.List.indexOf(item);var indexFrom = DDD.List.indexOf(Current.item);swapArrayElements(DDD.List, indexFrom, indexTo);Current.groupArr.forEach(function (item) {if (item != Current.item) {DDD.List.splice(DDD.List.indexOf(item), 1);}});var targetIndex = DDD.List.indexOf(Current.item);if (Current.groupArr.length) {var _DDD$List;(_DDD$List = DDD.List).splice.apply(_DDD$List, [targetIndex, 1].concat(_toConsumableArray(Current.groupArr)));}Current.index = indexTo;isSwap = true;$dragging.$emit('dragged', {draged: Current.item,to: item,value: DDD.value,group: key});}function handleDragLeave(e) {_.removeClass(getBlockEl(e.target), 'drag-over', 'drag-enter');}function handleDrag(e) { }function handleDragEnd(e) {var el = getBlockEl(e.target);_.removeClass(el, 'dragging', 'drag-over', 'drag-enter');Current = null;// if (isSwap) {isSwap = false;var group = el.getAttribute('drag_group');$dragging.$emit('dragend', { group: group });// }}function handleDrop(e) {e.preventDefault();if (e.stopPropagation) {e.stopPropagation();}return false;}function getBlockEl(el) {if (!el) return;while (el.parentNode) {if (el.getAttribute && el.getAttribute('drag_block')) {return el;break;} else {el = el.parentNode;}}}function swapArrayElements(items, indexFrom, indexTo) {var item = items[indexTo];if (isPreVue === '1') {items.$set(indexTo, items[indexFrom]);items.$set(indexFrom, item);} else if (isPreVue === '2') {Vue.set(items, indexTo, items[indexFrom]);Vue.set(items, indexFrom, item);} else if (isPreVue === '3') {items[indexTo] = items[indexFrom]items[indexFrom] = item}return items;}function getOverElementFromTouch(e) {var touch = e.touches[0];var el = document.elementFromPoint(touch.clientX, touch.clientY);return el;}function addDragItem(el, binding, vnode) {var item = binding.value.item;var list = binding.value.list;var DDD = dragData.new(binding.value.group);var drag_key = isPreVue === '1' ? binding.value.key : vnode.key;DDD.value = binding.value;DDD.className = binding.value.className;DDD.KEY_MAP[drag_key] = item;if (list && DDD.List !== list) {DDD.List = list;}el.setAttribute('draggable', 'true');el.setAttribute('drag_group', binding.value.group);el.setAttribute('drag_block', binding.value.group);el.setAttribute('drag_key', drag_key);el.setAttribute('comb', binding.value.comb);_.on(el, 'dragstart', handleDragStart);_.on(el, 'dragenter', handleDragEnter);_.on(el, 'dragover', handleDragOver);_.on(el, 'drag', handleDrag);_.on(el, 'dragleave', handleDragLeave);_.on(el, 'dragend', handleDragEnd);_.on(el, 'drop', handleDrop);_.on(el, 'touchstart', handleDragStart);_.on(el, 'touchmove', handleDragEnter);_.on(el, 'touchend', handleDragEnd);}function removeDragItem(el, binding, vnode) {var DDD = dragData.new(binding.value.group);var drag_key = isPreVue === '1' ? binding.value.key : vnode.key;DDD.KEY_MAP[drag_key] = undefined;_.off(el, 'dragstart', handleDragStart);_.off(el, 'dragenter', handleDragEnter);_.off(el, 'dragover', handleDragOver);_.off(el, 'drag', handleDrag);_.off(el, 'dragleave', handleDragLeave);_.off(el, 'dragend', handleDragEnd);_.off(el, 'drop', handleDrop);_.off(el, 'touchstart', handleDragStart);_.off(el, 'touchmove', handleDragEnter);_.off(el, 'touchend', handleDragEnd);}if (isPreVue === '3') {Vue.config.globalProperties.$dragging = $dragging;} else {Vue.prototype.$dragging = $dragging;}if (isPreVue === '1') {Vue.directive('dragging', {update: function update(newValue, oldValue) {addDragItem(this.el, {modifiers: this.modifiers,arg: this.arg,value: newValue,oldValue: oldValue});},unbind: function unbind(newValue, oldValue) {removeDragItem(this.el, {modifiers: this.modifiers,arg: this.arg,value: newValue ? newValue : { group: this.el.getAttribute('drag_group') },oldValue: oldValue});}});} else if (isPreVue === '2') {Vue.directive('dragging', {bind: addDragItem,update: function update(el, binding, vnode) {var DDD = dragData.new(binding.value.group);var item = binding.value.item;var list = binding.value.list;var drag_key = vnode.key;var old_item = DDD.KEY_MAP[drag_key];if (item && old_item !== item) {DDD.KEY_MAP[drag_key] = item;}if (list && DDD.List !== list) {DDD.List = list;}},unbind: removeDragItem});} else if (isPreVue === '3') {Vue.directive('dragging', {beforeMount: addDragItem,update: function update(el, binding, vnode) {var DDD = dragData.new(binding.value.group);var item = binding.value.item;var list = binding.value.list;var drag_key = vnode.key;var old_item = DDD.KEY_MAP[drag_key];if (item && old_item !== item) {DDD.KEY_MAP[drag_key] = item;}if (list && DDD.List !== list) {DDD.List = list;}},unmounted: removeDragItem});}};return vueDragging;})));

二、在main.js中使用

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'import vueDragging from "./directives/vue-drag"const Vue = createApp(App)Vue.use(store)
Vue.use(router)
Vue.use(ElementPlus,{ size: 'small', zIndex: 3000 })
Vue.use(vueDragging)
Vue.mount('#app')

三、在 .vue 组件中使用和前一篇文章中使用方法一样

在vue3中使用：

<template><div class="other-group"><h2>五小一大拖拽</h2><div class="des">模块拖拽，不能重新渲染dom，不能改变数据结构</div><br><div class="color-show"><div v-for="color in colors" v-dragging="{ list: colors, item: color, group: 'colors' }" class="color-box" :style="{'background-color': color.text}":key="color.text">{{color.text}}</div></div></div>
</template>
<!--your.vue-->
<script>
import { reactive, toRefs } from '@vue/reactivity'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
export default {setup() {const interInstance = getCurrentInstance()// let $dragging = interInstance.appContext.config.globalProperties.$dragginglet state = reactive({colors: [{ text: "Aquamarine" },{ text: "Hotpink" },{ text: "Gold" },{ text: "Crimson" },{ text: "Blueviolet" },{ text: "rgb(0,100," + Math.random() * 100 + ")" }]})let VueDragging = vueDrag()onMounted(() => {console.log("onmounted", VueDragging)VueDragging.$on('dragged', ({ value }) => {console.log(value.item)console.log(value.list)})VueDragging.$on('dragend', function (data) {console.log('dragend', data)})})return {...toRefs(state)}},
}
function vueDrag() {return getCurrentInstance().appContext.config.globalProperties.$dragging
}
</script><style scoped>
.other-group,
.multi-group {margin-left: 20px;
}.color-show {/* display: flex;flex-wrap: wrap; */width: 30rem;margin: 0 auto;
}
.color-box {float: left;width: 33%;height: 6rem;background: #efefef;line-height: 6rem;text-align: center;color: #fff;transition: transform 0.3s;
}
.color-box:first-child {width: 66%;height: 12rem;
}
.color-box.dragging {transform: scale(1.1);
}
</style>