拖拽”是提升用户体验的重要交互方式，所以需要对拖拽的交互效果做各种定制化，作为开发者理应熟练掌握“拖拽”的应用！

背景 @TOC 第一步是MDN拖拽方法总结,若无兴趣可以略过。 本着做什么功能都尽量不导入包的思维, 我放弃了使用vue的插件(需要导入的包太大,冗余代码太多) 转而选择使用H5原生来实现这个功能 一

之前撸了一个 copy 指令，这次再撸一个拖拽指令。。 emmm。。没错，看起来就是如此的鸡肋，但是莫得办法，大佬喜欢啊。 由于我们项目中用的是 element-ui ，所有这个指令只针对 element-ui的对话框组件哈，如果你们用的别的ui库也有这个需求的，涂涂改改应该也…

问题描述 产品大佬说这个表格的列现在是可以拖动，但是拖动了以后，当用户刷新以后，拖动的列的宽度会回到默认的宽度了，所以，增加一个表格拖动列，刷新宽度还在功能。 思路 刷新还在的功能肯定是要存储一份数据

问题描述 Sortable.js是一款优秀的js拖拽库，因为是原生js写的，所以性能不错，也支持移动端哦。本文举两个案例来学习一下。 案例一 简单拖拽 效果图 代码附上 关于理解看注释哦，运行的话复制

mousedown 事件在指针设备按钮按下时触发。 mouseup事件在指针设备按钮抬起时触发。 当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。 如果不设置这段代码，会发生奇怪的现象，这是因为浏览器有自己的对图片和一些其他元素的拖放处理，会在我们…

自定义指令-拖拽 前言 vue3正式版已经发布大半年了,咱也得紧跟时代潮流,vue3带来的很多改变,使用ts重写代码,在兼容vue2语法的基础上,增加了很多新语法,比如新增了组合api,也移除了一些旧

element-plus 的 el-dialog 没有提供拖拽功能，有点小遗憾。这里提供一种使用 vue3 的自定义指令的方法，实现拖拽功能的方法。

这是这次系列文章的第一篇，我自己封装了一个用vue实现的拖拽排列卡片组件，并且发布到npm，详细地记录下来了整体制作过程。总共有三篇文章，介绍组件的制作思路和遇到的问题，以及在发布到npm上并下载使用的过程中，发生了什么问题并如何解决。 两个部分都是可以进行自定义内容及样式的。…