【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能
迪丽瓦拉
2024-05-25 16:52:40
0次
前言
这是html版本的。只是引用了vue的语法。
这是很多公司会出现的一种情况，就是原生的页面，引入vue的语法开发
这就导致有些vue上很简单的功能。放到这里需要转换一下
以前写过一个vue版本的帖子，现在再加一个html版本的。
另一个vue版本
需要看vue版本的，直接点击这里我另一个帖子看
跳转链接
效果图
这是弹框的可以拖动，并且不会超出页面，到了边缘就会停止拖不出去了。
这里一样的，div按住拖拽，这种是可以超出页面范围的
div拖拽代码
核心就是下面的自定义指令生成。
然后再div上面添加v-drag就可以使用了，很简单
div拖拽模板
按住拖拽
弹框拖拽代码
这里也是一样的，我这里使用elementul的弹框组件
直接就是鼠标放到弹框的头部就会变成可移动的箭头。按住拖动。
功能实现也是自定义指令，然后再弹框上放一个v-drag就可以了。
注意是加载el-dialog标签上的。别加错了
div拖拽模板
打开嵌套表格的 Dialog 下一篇：C++ 基础