基于vue3指令实现悬浮拖拽效果的方法、系统及存储介质与流程

1.本发明属于车辆座椅罩领域，特别是涉及基于vue3指令实现悬浮拖拽效果的方法、系统及存储介质。


背景技术：

2.随着前端技术的飞快发展，vue已经成为一个完整生态的前端渐进式框架；在前端页面中，悬浮主按钮、悬浮元素的应用使页面更加丰富，本发明基于vue3实现指令，实现在页面中对任意元素设置悬浮拖拽的效果；
3.现有技术的实现大都基于vue2实现，需要独立处理dom元素、样式并通过功能开发实现悬浮、拖拽功能；如csnd博客网站中所公开的“vue移动端拖拽悬浮按钮”、“vue实现悬浮且任意上下左右拖拽元素，点击按钮不会触发拖拽”、“vue可拖拽悬浮按钮组件”等技术方案。
4.现有技术中，对于悬浮拖拽效果的实现多种多样，大多通过修改样式、通过原生js操作dom方式实现，实际应用中需要根据实际需求改动代码本身，对需要实现悬浮拖拽效果的元素进行样式处理，事件监听、监听回调具体是通过功能代码实现。
5.本发明则基于vue3框架进行设计开发，将此功能封装成指令方式，在基于vue3框架的实际应用中，只需在元素是使用自定义指令，通过一句指令配置语句，即可实现悬浮拖拽功能，并且指令中提供多个参数配置，对任意元素自由配置悬浮拖拽效果的实现。


技术实现要素：

6.本发明提供了基于vue3指令实现悬浮拖拽效果的方法、系统及存储介质，基于vue3框架开发设计一个指令，可实现在页面中任意位置悬浮任意元素，并提供拖拽功能，使元素可上下左右任意拖拽；并且可通过配置、设置元素是否允许任意位置拖拽及放置。
7.为解决上述技术问题，本发明是通过以下技术方案实现的：
8.本发明的基于vue3指令实现悬浮拖拽效果的方法，包括如下步骤：
9.s1、获取指令绑定的元素及参数；
10.s2、指令绑定元素挂载时，对参数进行检测及初始化；具体是当指令元素的所有节点挂载完成或者有节点更新后，触发指令的钩子回调，在回调中获取指令配置的值、参数、修饰符，对功能的参数进行配置；
11.s3、指令绑定元素及参数更新时，对参数进行检测及初始化；
12.s4、页面卸载或者元素卸载时，对元素的监听事件进行移出。
13.进一步地，所述s1步骤具体是：当在dom元素上使用自定义指令时，在指令钩子回调中获取指令绑定的dom元素，并同时获取包括指令传递的值、参数、修饰符、元素的属性数据。
14.进一步地，所述s2步骤包括如下分步骤：
15.s21、获取元素挂载位置，将元素挂载到指定位置，默认页面body标签；
16.s22、获取元素设置的初始位置，并将元素悬浮在初始位置，正数的坐标点为左上，负数的坐标点为右下；
17.s23、获取元素设置的单元，默认为像素；
18.s24、根据参数判断元素是否可以进行拖动，若指令配置了drag参数，元素允许拖动，否则不允许，默认为不允许；
19.s25、根据参数判断元素是否可以进行上下拖动，默认允许上下左右拖动，若指令配置了horizontal修饰符，则禁止左右拖动；
20.s26、根据参数判断元素是否可以进行左右拖动，默认允许上下左右拖动，若指令配置了vertical，则禁止上下拖动；
21.s27、根据参数判断元素是否可以放置在页面中的左右任意位置，默认根据重点位置进行左右吸边，若指令配置了anywhere修饰符，则元素可放置页面中任意位置；
22.s28、配置指令元素的上下左右的边界位置，使元素在指定位置进行拖拽；通过配置元素的pin-boundary属性进行边界配置，值为长度为4的数组，分别对应上右下左四个位置。
23.进一步地，所述s3步骤具体包括如下分步骤：
24.s31、获取元素挂载位置，将元素挂载到指定位置，默认页面body标签；
25.s32、获取元素设置的初始位置，并将元素悬浮在初始位置，正数的坐标点为左上，负数的坐标点为右下；
26.s33、获取元素设置的单位，默认为像素；
27.s34、根据参数判断元素是否可以进行拖动，若指令配置了drag参数，元素允许拖动，否则不允许，默认不允许；
28.s35、启动元素的事件监听器，对元素的单手指触摸事件进行监听；
29.s36、根据参数判断元素是否可以进行上下拖动，默认允许上下左右拖动，若指令配置了horizontal修饰符，则禁止左右拖动；
30.s37、据参数判断元素是否可以进行左右拖动，默认允许上下左右拖动，若指令配置了vertical，则禁止上下拖动；
31.s38、根据参数判断元素是否可以放置在页面中的左右任意位置，默认根据中点位置进行左右吸边，若指令配置了anywhere修饰符，则元素可放置页面中任意位置；
32.s39、配置指令元素的上下左右的边界位置，使元素在指定位置中进行拖拽；通过配置元素的pin-boundary属性进行边界配置，值为长度为4的数组。
33.进一步地，所述单手指触摸事件包括在移动设备中监听单手指触碰事件、单手指的按下移动事件、单手指的松开事件、在pc端中监听鼠标按下事件、鼠标按下移动事件、鼠标松开事件。
34.进一步地，所述s4步骤具体是移除在移动设备中监听单手指触碰事件，单手指的按下移动事件，单手指的松开事件；在pc端中监听鼠标按下事件，鼠标按下移动事件，鼠标松开事件。
35.基于vue3指令实现悬浮拖拽效果的系统，包括存储器、处理器及存储在所述存储器上且在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述基于vue3指令实现悬浮拖拽效果的方法的步骤。
36.一种计算机存储介质，其上存储有计算机程序，所述计算机程序被计算机执行时实现如上述基于vue3指令实现悬浮拖拽效果的方法的步骤。
37.本发明相对于现有技术包括有以下有益效果：
38.本发明提供了多个参数，对悬浮及拖拽等功能进行配置；使用正数数值，设置元素左上角位置，使用负数方式，设置元素右下角位置，因此在使用中减少了元素位置的计算；提供多个参数，对元素拖拽功能进行自定义配置，包括：元素初识位置、是否允许拖拽、拖拽左右边界等；基于vue3框架开发设计一个指令，可实现在页面中任意位置悬浮任意元素，并提供拖拽功能，使元素可上下左右任意拖拽；并且可通过配置、设置元素是否允许任意位置拖拽及放置。
39.当然，实施本发明的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
40.为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
41.图1为本发明基于vue3指令实现悬浮拖拽效果的方法的步骤流程图；
42.图2本发明的一种应用的原理图。
具体实施方式
43.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
44.请参阅图1所示，本发明的基于vue3指令实现悬浮拖拽效果的方法，包括如下步骤：
45.s1、获取指令绑定的元素及参数；
46.其中，s1步骤具体是：当在dom元素上使用自定义指令时，在指令钩子回调中获取指令绑定的dom元素，并同时获取包括指令传递的值、参数、修饰符、元素的属性数据；
47.s2、指令绑定元素挂载时，对参数进行检测及初始化；具体是当指令元素的所有节点挂载完成或者有节点更新后，触发指令的钩子回调，在回调中获取指令配置的值、参数、修饰符，对功能的参数进行配置；
48.其中，s2步骤包括如下分步骤：
49.s21、获取元素挂载位置，将元素挂载到指定位置，默认页面body标签；
50.s22、获取元素设置的初始位置，并将元素悬浮在初始位置，正数的坐标点为左上，负数的坐标点为右下；
51.s23、获取元素设置的单元，默认为像素；
52.s24、根据参数判断元素是否可以进行拖动，若指令配置了drag参数，元素允许拖动，否则不允许，默认为不允许；
53.s25、根据参数判断元素是否可以进行上下拖动，默认允许上下左右拖动，若指令配置了horizontal修饰符，则禁止左右拖动；
54.s26、根据参数判断元素是否可以进行左右拖动，默认允许上下左右拖动，若指令配置了vertical，则禁止上下拖动；
55.s27、根据参数判断元素是否可以放置在页面中的左右任意位置，默认根据重点位置进行左右吸边，若指令配置了anywhere修饰符，则元素可放置页面中任意位置；
56.s28、配置指令元素的上下左右的边界位置，使元素在指定位置进行拖拽；默认边界为上右下左各20px，可通过配置元素的pin-boundary属性进行边界配置，值为长度为4的数组，分别对应上右下左四个位置，举个例子，如：[10,10,10,10]；
[0057]
s3、指令绑定元素及参数更新时，对参数进行检测及初始化；
[0058]
其中，s3步骤具体包括如下分步骤：
[0059]
s31、获取元素挂载位置，将元素挂载到指定位置，默认页面body标签；
[0060]
s32、获取元素设置的初始位置，并将元素悬浮在初始位置，正数的坐标点为左上，负数的坐标点为右下；
[0061]
s33、获取元素设置的单位，默认为像素；
[0062]
s34、根据参数判断元素是否可以进行拖动，若指令配置了drag参数，元素允许拖动，否则不允许，默认不允许；
[0063]
s35、启动元素的事件监听器，对元素的单手指触摸事件进行监听；
[0064]
s36、根据参数判断元素是否可以进行上下拖动，默认允许上下左右拖动，若指令配置了horizontal修饰符，则禁止左右拖动；
[0065]
s37、据参数判断元素是否可以进行左右拖动，默认允许上下左右拖动，若指令配置了vertical，则禁止上下拖动；
[0066]
s38、根据参数判断元素是否可以放置在页面中的左右任意位置，默认根据中点位置进行左右吸边，若指令配置了anywhere修饰符，则元素可放置页面中任意位置；
[0067]
s39、配置指令元素的上下左右的边界位置，使元素在指定位置中进行拖拽；默认边界为上右下左各20px，可通过配置元素的pin-boundary属性进行边界配置，值为长度为4的数组，分别对应上右下左四个位置，举个例子，如：[10,10,10,10]。
[0068]
其中，单手指触摸事件包括在移动设备中监听单手指触碰事件、单手指的按下移动事件、单手指的松开事件、在pc端中监听鼠标按下事件、鼠标按下移动事件、鼠标松开事件；
[0069]
s4、页面卸载或者元素卸载时，对元素的监听事件进行移出；
[0070]
其中，s4步骤具体是移除在移动设备中监听单手指触碰事件，单手指的按下移动事件，单手指的松开事件；在pc端中监听鼠标按下事件，鼠标按下移动事件，鼠标松开事件。
[0071]
在基于vue3框架开发的h5应用中，页面中右下角添加一个悬浮按钮，点击可快速导航至首页或者任意页面的快捷入口，并支持用户随意拖动该按钮以防该按钮遮盖主页面中的某些元素时，可使用本发明。本发明基于vue3框架下，提供一个了更便捷易使用的方式实现以上功能；
[0072]
如图2所示，本发明的一种应用的原理图，具体是在需要元素的页面中，引入该发明设计的指令，将指令绑定到对应的元素中使用；指令根据配置参数赋予元素对应的功能。
[0073]
基于vue3指令实现悬浮拖拽效果的系统，包括存储器、处理器及存储在存储器上且在处理器上运行的计算机程序，处理器执行计算机程序时实现如基于vue3指令实现悬浮拖拽效果的方法中s1-s4的步骤。
[0074]
一种计算机存储介质，其上存储有计算机程序，计算机程序被计算机执行时实现如基于vue3指令实现悬浮拖拽效果的方法中s1-s4的步骤。
[0075]
以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。

技术特征：
1.基于vue3指令实现悬浮拖拽效果的方法，其特征在于，包括如下步骤：s1、获取指令绑定的元素及参数；s2、指令绑定元素挂载时，对参数进行检测及初始化；具体是当指令元素的所有节点挂载完成或者有节点更新后，触发指令的钩子回调，在回调中获取指令配置的值、参数、修饰符，对功能的参数进行配置；s3、指令绑定元素及参数更新时，对参数进行检测及初始化；s4、页面卸载或者元素卸载时，对元素的监听事件进行移出。2.根据权利要求1所述的基于vue3指令实现悬浮拖拽效果的方法，其特征在于，所述s1步骤具体是：当在dom元素上使用自定义指令时，在指令钩子回调中获取指令绑定的dom元素，并同时获取包括指令传递的值、参数、修饰符、元素的属性数据。3.根据权利要求1所述的基于vue3指令实现悬浮拖拽效果的方法，其特征在于，所述s2步骤包括如下分步骤：s21、获取元素挂载位置，将元素挂载到指定位置，默认页面body标签；s22、获取元素设置的初始位置，并将元素悬浮在初始位置，正数的坐标点为左上，负数的坐标点为右下；s23、获取元素设置的单元，默认为像素；s24、根据参数判断元素是否可以进行拖动，若指令配置了drag参数，元素允许拖动，否则不允许，默认为不允许；s25、根据参数判断元素是否可以进行上下拖动，默认允许上下左右拖动，若指令配置了horizontal修饰符，则禁止左右拖动；s26、根据参数判断元素是否可以进行左右拖动，默认允许上下左右拖动，若指令配置了vertical，则禁止上下拖动；s27、根据参数判断元素是否可以放置在页面中的左右任意位置，默认根据重点位置进行左右吸边，若指令配置了anywhere修饰符，则元素可放置页面中任意位置；s28、配置指令元素的上下左右的边界位置，使元素在指定位置进行拖拽；通过配置元素的pin-boundary属性进行边界配置，值为长度为4的数组，分别对应上右下左四个位置。4.根据权利要求1所述的基于vue3指令实现悬浮拖拽效果的方法，其特征在于，所述s3步骤具体包括如下分步骤：s31、获取元素挂载位置，将元素挂载到指定位置，默认页面body标签；s32、获取元素设置的初始位置，并将元素悬浮在初始位置，正数的坐标点为左上，负数的坐标点为右下；s33、获取元素设置的单位，默认为像素；s34、根据参数判断元素是否可以进行拖动，若指令配置了drag参数，元素允许拖动，否则不允许，默认不允许；s35、启动元素的事件监听器，对元素的单手指触摸事件进行监听；s36、根据参数判断元素是否可以进行上下拖动，默认允许上下左右拖动，若指令配置了horizontal修饰符，则禁止左右拖动；s37、据参数判断元素是否可以进行左右拖动，默认允许上下左右拖动，若指令配置了vertical，则禁止上下拖动；
s38、根据参数判断元素是否可以放置在页面中的左右任意位置，默认根据中点位置进行左右吸边，若指令配置了anywhere修饰符，则元素可放置页面中任意位置；s39、配置指令元素的上下左右的边界位置，使元素在指定位置中进行拖拽；通过配置元素的pin-boundary属性进行边界配置，值为长度为4的数组。5.根据权利要求4所述的基于vue3指令实现悬浮拖拽效果的方法，其特征在于，所述单手指触摸事件包括在移动设备中监听单手指触碰事件、单手指的按下移动事件、单手指的松开事件、在pc端中监听鼠标按下事件、鼠标按下移动事件、鼠标松开事件。6.根据权利要求1所述的基于vue3指令实现悬浮拖拽效果的方法，其特征在于，所述s4步骤具体是移除在移动设备中监听单手指触碰事件，单手指的按下移动事件，单手指的松开事件；在pc端中监听鼠标按下事件，鼠标按下移动事件，鼠标松开事件。7.基于vue3指令实现悬浮拖拽效果的系统，其特征在于，包括存储器、处理器及存储在所述存储器上且在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-6中任一项所述方法的步骤。8.一种计算机存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被计算机执行时实现权利要求1-6中任一项所述方法的步骤。

技术总结
本发明公开了基于vue3指令实现悬浮拖拽效果的方法、系统及存储介质，涉及计算机前端技术领域。本发明包括：获取指令绑定的元素及参数；指令绑定元素挂载时，对参数进行检测及初始化；指令绑定元素及参数更新时，对参数进行检测及初始化；页面卸载或者元素卸载时，对元素的监听事件进行移出。本发明提供了多个参数，对悬浮及拖拽等功能进行配置；使用正数数值，在使用中减少了元素位置的计算；提供多个参数，对元素拖拽功能进行自定义配置，基于Vue3框架开发设计一个指令，可实现在页面中任意位置悬浮任意元素，并提供拖拽功能，使元素可上下左右任意拖拽；并且可通过配置、设置元素是否允许任意位置拖拽及放置。素是否允许任意位置拖拽及放置。素是否允许任意位置拖拽及放置。


技术研发人员：乔明辉 王培
受保护的技术使用者：上海悦米信息技术有限公司
技术研发日：2023.03.10
技术公布日：2023/7/12