vue：实现简单的拖拽功能

背景

平常做业务很容易遇到拖拽功能，没做之前总觉得会很复杂，今天来看一下到底是怎么实现的。

拖拽API

这是 HTML5 新增的 API，当给元素设置 draggable="true" 的时候，这个元素就可以拖拽了。

<div draggable="true">这是拖拽元素
</div>
<div>这是放置区元素
</div>

这时已经可以拖拽第一个元素了

以下是一些常用的 API 介绍：

注意：dragenter 和 dragover 事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为，使用 e.preventDefault()

实例

<template><div><transition-groupname="drag"class="list"tag="ul"><liv-for="(item, index) in todolist":key="item.label"draggable:class="['list-item', { 'is-dragover': index === dragOverIndex }]"@dragstart="dragStart(item, index)"@dragover.prevent="dragOver(index)"@dragend="dragEnd()">{{ item.label }}</li></transition-group></div>
</template>
<script>
export default {data () {return {todolist: [{ label: '列表1' },{ label: '列表2' },{ label: '列表3' },{ label: '列表4' },{ label: '列表5' },{ label: '列表6' }],dragStartIndex: '',dragStartData: '',dragOverIndex: ''}},methods: {dragStart (item, index) {this.dragStartIndex = indexthis.dragStartData = item},// 只要拖拽元素进入到放置区域就触发，这里实际是鼠标指针进入放置区域才触发dragOver (index) {this.dragOverIndex = index},dragEnd () {const copyTodolist = [...this.todolist]// 删除老的节点copyTodolist.splice(this.dragStartIndex, 1)// 在列表中目标位置增加新的节点copyTodolist.splice(this.dragOverIndex, 0, this.dragStartData)this.todolist = [...copyTodolist]this.dragOverIndex = ''}}
}
</script>
<style lang="scss" scoped>
.list {list-style: none;.drag-move {transition: transform 0.3s;}.list-item {position: relative;cursor: move;width: 300px;background: #EA6E59;border-radius: 4px;color: #FFF;margin: 10px 0;height: 50px;line-height: 50px;text-align: center;}
}.list-item.is-dragover::before {content: "";position: absolute;bottom: -8px;left: 0;width: 100%;height: 4px;background-color: #0c6bc9;
}
.list-item.is-dragover::after {content: "";position: absolute;bottom: -12px;left: -6px;border: 3px solid #0c6bc9;border-radius: 50%;width: 6px;height: 6px;background-color: #fff;
}
</style>

这里只做简单的演示，具体完善还有一些问题，比如：
把1拖到2和3中间，变成213，这样没问题。
但是把3拖到1和2中间，变成了312，这样是有问题的。

vue：实现简单的拖拽功能相关推荐

draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
iview+vue实现表头的拖拽功能
一.项目需求: 需求:表格实现表头拖拽.排序.树形表格展示.下载Excel.下载CSV格式的数据项目里用到的技术:iview的table+vue 参考文章:https://www.cnblogs.c ...
vue项目实现鼠标拖拽功能
<divid="back"@mousedown="draggableFun($event)"></div> //e.clientX和e. ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
拖拽功能 php,基于Vue实现拖拽功能
这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: ...
vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...

vue：实现简单的拖拽功能

背景

拖拽API

实例

相关资料

vue：实现简单的拖拽功能相关推荐

最新文章

热门文章