vue 拖拽功能样式优化

拖拽需求完成之后发现拖拽的过程中很丑放下的时候光标处也是禁止

虽然说功能不影响但是用户体验还是不太好不够专业

所以请做以下优化

1. 把需要拖拽的图标加上可拖拽属性

<div draggable="true">需要拖拽的元素</div>

draggable="true"

2. 在目标元素上添加ondragover事件(拖拽某元素在目标元素上移动时触发,这个事件对象是目标元素)

我使用的是vue所以添加

@dragover="allowDrop($event)" // vue
ondragover="allowDrop(event)" // 原生JS

allowDrop方法用来实现阻止默认时事件

// vue
allowDrop (e) {e.preventDefault();
}// 原生JS
allowDrop (e) {e.preventDefault();
}

这样按下鼠标拖拽到目标元素上之后鼠标就没有那个违停标志了 hhh

vue 拖拽功能样式优化相关推荐

vue拖拽功能，提高你的开发效率
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
拖拽功能 php,基于Vue实现拖拽功能
这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: ...
vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
ant-desgin vue 弹窗拖拽功能实现
实现拖拽功能,主要有以下几个步骤: 1. 鼠标点击时获取鼠标的坐标,并开始监听鼠标的移动和鼠标的松开动作 2. 鼠标移动时获取当前坐标,并计算相对于鼠标点击时坐标的偏移值,并修改弹窗的偏移量 3. 鼠 ...
vue：实现简单的拖拽功能
背景平常做业务很容易遇到拖拽功能,没做之前总觉得会很复杂,今天来看一下到底是怎么实现的. 拖拽API 这是 HTML5 新增的 API,当给元素设置 draggable="true&quo ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...

vue 拖拽功能样式优化

1. 把需要拖拽的图标加上可拖拽属性

2. 在目标元素上添加ondragover事件(拖拽某元素在目标元素上移动时触发,这个事件对象是目标元素)

vue 拖拽功能样式优化相关推荐

最新文章

热门文章