前端实现拖拽的方案

1. 三方类库实现拖拽 PixiJS Examples
2. H5设置元素 draggable 属性 每个元素都有draggable 属性，不过默认是false，我们把需要拖放的元素 draggable 属性设置为 true，可实现拖拽功能 <div draggable="true"></div>此时，元素已经可以拖动了，但会显示一个禁止的图标，这是因为没有可放置的区域。 创建一个区域 只需要在标签上添加 ondragover 和 ondrop 方法即可，表示这个区域可放置并进行处理。<div @drop.prevent="drop" @dragover.prevent="dragover"></div>还需要在需要拖动的元素上添加 ondragstart 方法。<div draggable="true" @dragstart="dragstart()"></div> vue中demo代码如下：<template> <div class="body flex"> <div draggable="true"></div> <ul> <li draggable="true" :ref="'li' + index + 1" v-for="(item, index) in list" :key="index" @dragstart="dragstart(index)" > {{ item }} </li> </ul> <div class="box center" @drop.prevent="drop" @dragover.prevent="dragover"> <div class="delete" @click="deleteBox()">删除</div> <p v-show="content">{{ text }}</p> </div> </div></template><script>export default { name: "", components: {}, data() { return { list: [ "拖放内容1", "拖放内容2", "拖放内容3", "拖放内容4", "拖放内容5", "拖放内容6" ], text: "", content: false }; }, computed: {}, watch: {}, mounted() {}, methods: { deleteBox() { this.content = false; }, // 拖动开始 dragstart(index) { this.text = "您已成功拖放元素" + (index + 1); }, // 进行放置 drop(event) { this.content = true; console.log("drop", event); }, // 放置位置 - 阻止默认事件 dragover(event) { event.preventDefault(); } }};</script><style lang="scss" scoped>.body { user-select: none; // 禁止选中文字 margin: 20px; font-size: 16px; ul { li { border-radius: 5px; cursor: pointer; margin-bottom: 10px; padding: 5px 10px; line-height: 26px; background-color: rgb(221, 221, 221); } } .box { position: relative; margin-left: 100px; width: 500px; height: 500px; border: 1px solid #999; .delete { cursor: pointer; position: absolute; top: 0; right: 0; padding: 5px 10px; background-color: rgba(243, 89, 84, 0.3); border-radius: 5px 0px 5px 5px; } .delete:hover { color: #fff; background-color: rgb(243, 89, 84); } p { font-size: 26px; font-weight: bold; animation: light 1s linear 1; } } @keyframes light { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }}</style>效果如下：
3. canvas 实现拖拽功能 先创建一个canvas元素 <canvas id="canvas" width="400" height="300"></canvas> 生成canvas对象并绑定鼠标事件 window.onload = function () { canvas = document.getElementById('canvas') context = canvas.getContext('2d') canvas.onmousedown = mouseDown canvas.onmousemove = mouseMove canvas.onmouseup = mouseUp} 实现一个绘制矩形方法 function Rect(startX, startY, endX, endY, color) { this.startX = startX this.startY = startY this.endX = endX this.endY = endY this.color = color this.isSelected = false}function drawRects() { clearCanvas() for (let i = 0; i < rectList.length; i++) { let rect = rectList[i] context.globalAlpha = 0.3 context.beginPath() context.moveTo(rect.startX, rect.startY) context.lineTo(rect.endX, rect.startY) context.lineTo(rect.endX, rect.endY) context.lineTo(rect.startX, rect.endY) context.lineTo(rect.startX, rect.startY) context.fillStyle = rect.color context.fill() if (rect.isSelected) { context.strokeStyle = 'black' context.stroke() } }}function clearCanvas() { // 去除所有圆圈 // rectList = [] context.clearRect(0, 0, canvas.width, canvas.height)} 鼠标按下时获取基准点，并判断此处位置是否已经存在一个绘制完成的图形，若不存在则标记为 isDrawing = true，若存在则标记为 isDragging = true， let startXlet startYlet width = 0let height = 0let isDrawing = falselet isDragging = falsefunction mouseDown(e) { startX = e.offsetX startY = e.offsetY rectIndex = rectList.findIndex(item => { if (item.startX < item.endX) { if (item.startY < item.endY) { return startX > item.startX && startX < item.endX && startY > item.startY && startY < item.endY } else { return startX > item.startX && startX < item.endX && startY > item.endY && startY < item.startY } } else { if (item.startY < item.endY) { return startX > item.endY && startX < item.startY && startY > item.startY && startY < item.endY } else { return startX > item.startX && startX < item.endX && startY > item.endY && startY < item.startY } } }) if (rectIndex !== -1) { currentRect = rectList[rectIndex] isDragging = true currentRect.isSelected = true undoArray.pop() const tempRectList = rectList.slice() const tempCurrentRect = Object.assign({}, currentRect) tempRectList.splice(rectIndex, 1, tempCurrentRect) undoArray.push(tempRectList) } else { isDrawing = true } color = colors[randomFromTo(0, 8)]} 鼠标拖动实时获取所在坐标值，isDrawing 为true 时调用drewRects​​​​​() 方法实时绘制图形，isDragging 为true 时获取新的位差绘制新图形。 function mouseMove(e) { endX = e.offsetX endY = e.offsetY if (isDrawing) { // context.clearRect(0, 0, canvas.width, canvas.height) drawRects() context.globalAlpha = 0.3 context.beginPath() context.moveTo(startX, startY) context.lineTo(endX, startY) context.lineTo(endX, endY) context.lineTo(startX, endY) context.lineTo(startX, startY) context.fillStyle = color context.strokeStyle = 'black' context.fill() context.stroke() } else if (isDragging) { const w = Math.abs(startX - endX) const h = Math.abs(startY - endY) if (endX < startX) { startX -= w endX -= w currentRect.startX -= w currentRect.endX -= w } if (endX >= startX) { startX += w endX += w currentRect.startX += w currentRect.endX += w } if (endY < startY) { startY -= h endY -= h currentRect.startY -= h currentRect.endY -= h } if (endY >= startY) { startY += h endY += h currentRect.startY += h currentRect.endY += h } // context.clearRect(0, 0, canvas.width, canvas.height) drawRects() }} 鼠标抬起时生成一个 Rect()实例完成一个图像绘制，放入图形列表。 function mouseUp(e) { if (isDrawing) { rectList.unshift(new Rect(startX, startY, endX, endY, color)) } if (isDragging) { rectList.forEach(item => { item.isSelected = false }) } undoArray.push(rectList.slice()) redoArray = [] isDrawing = false isDragging = false}

效果图如下：