【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能_外汇行情

迪丽瓦拉

2024-05-25 16:52:40

0次

前言

这是html版本的。只是引用了vue的语法。
这是很多公司会出现的一种情况，就是原生的页面，引入vue的语法开发
这就导致有些vue上很简单的功能。放到这里需要转换一下
以前写过一个vue版本的帖子，现在再加一个html版本的。

需要看vue版本的，直接点击这里我另一个帖子看
跳转链接

这是弹框的可以拖动，并且不会超出页面，到了边缘就会停止拖不出去了。
在这里插入图片描述
这里一样的，div按住拖拽，这种是可以超出页面范围的

核心就是下面的自定义指令生成。
然后再div上面添加v-drag就可以使用了，很简单



div拖拽模板
按住拖拽

这里也是一样的，我这里使用elementul的弹框组件
直接就是鼠标放到弹框的头部就会变成可移动的箭头。按住拖动。
功能实现也是自定义指令，然后再弹框上放一个v-drag就可以了。
注意是加载el-dialog标签上的。别加错了


div拖拽模板
打开嵌套表格的 Dialog

下一篇：C++ 基础