时间：2023-07-02 23:24:01 | 来源：网站运营
时间：2023-07-02 23:24:01 来源：网站运营
web前端---拖拽牛逼，轻松实现一个自由拖拽的组件：
在线咨询
html5 中新添加的全局属性 draggable 属性，该属性规定了元素是否可进行拖动。属性值如下所示：draggable 属性时，该元素就可以进行拖动操作了。<div draggable > 可拖动的元素 </div>(e)，在拖动对象中我们能获取到一个重要的属性 dataTransfer ，我们可以通过 dataTransfer 的 dropEffect 属性控制被拖动的元素的放置行为，其值的说明如下所示。<template> <div> <!-- 左侧组件列表 --> <div class="left"> <div class="left-item" v-for="item in list1" :key="item.code" draggable > {{ item.name }} </div> </div> <!-- 画布区域 --> <div class="targetContent" ref="targetContent"> <div class="item" v-for="item in list2" :key="item.id" :ref="item.id" :style="{ top: `${item.top - 16}px`, left: `${item.left - 85}px`, 'z-index': `${item.zIndex}` }" > <template v-if="item.code === 'MyInput'"> <a-input></a-input> </template> </div> </div> </div></template>并将组件列表和画布中的页面分别通过list1，和list进行遍历渲染。<script>import _ from "lodash";export default { data() { return { list1: [ { code: "MyInput", name: "输入框", props: {} } ], list2: [], }; }}</script>下面我们来分析一下如何实现将组件列表中的组件拖动到画布中，上文中我们讲到，拖动的元素以及目标元素可以设置一系列的事件，那么我们就可以在组件列表渲染时，为每个组件设置一下 dragstart 事件，在该事件中我们需要做如下处理：移动，即move。drop。不能拖放，即none。list2中，元素所对应的元数据记录也了这个组件在画面中的坐标位置。dragend事件中取听以上动作。dragstart 和dragend事件。@dragstart="e => dragstart(e, item)"@dragend="dragend"下面是这两个事件的实现。dragstart(e, item) { this.dragItem = item; // 设置元素的放置行为——移动 this.$refs.targetContent.addEventListener("dragenter", this.dragenter); // 在目标元素经过 必须要阻止默认行为 否则不能触发drop this.$refs.targetContent.addEventListener("dragover", this.dragover); // 离开目标元素时设置元素的放置行为——不能拖放 this.$refs.targetContent.addEventListener("dragleave", this.dragleave); // 拖动元素在目标元素松手时添加元素到画布 this.$refs.targetContent.addEventListener("drop", this.drop);},dragend(e) { this.$refs.targetContent.removeEventListener("dragenter", this.dragenter); this.$refs.targetContent.removeEventListener("dragover", this.dragover); this.$refs.targetContent.removeEventListener("dragleave", this.dragleave); this.$refs.targetContent.removeEventListener("drop", this.drop);},dragenter(e) { e.dataTransfer.dropEffect = "move";},dragover(e) { e.preventDefault();},dragleave(e) { e.dataTransfer.dropEffect = "none";},drop(e) { const { code } = this.dragItem; this.list2.push({ top: e.offsetY, left: e.offsetX, zIndex: 1, code: code, id: Date.parse(new Date()) }); this.dragItem = null;}这样，我们组件列表中的组件就可以拖动到画布中了。mousedown事件，在事件中我们添加mousemove事件的监听，当画布中的组件进行移动时，我们实时的将该被移动元素所对应的元数据坐标进行更新。下面是代码的实现。mousedown(e, item) { this.moveItem = item; document.addEventListener("mousemove", this.mousemove); document.addEventListener("mouseup", this.mouseup);},mousemove(e) { const _this = this; let { clientX, clientY } = e; const moveIdx = _.findIndex(this.list2, function(o) { return o.id === _this.moveItem.id; }); let newList2 = _.cloneDeep(this.list2); newList2[moveIdx].top = clientY; newList2[moveIdx].left = clientX; this.list2 = newList2;},mouseup(e) { document.removeEventListener("mousemove", this.mousemove); document.removeEventListener("mouseup", this.mouseup);}这样画布中的组件也就支持移动啦。来一波关注吧。我们会持续与大家分享与交流。关键词：自由,实现
