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

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

【技术实现步骤摘要】
基于vue3指令实现悬浮拖拽效果的方法、系统及存储介质


[0001]本专利技术属于车辆座椅罩领域，特别是涉及基于vue3指令实现悬浮拖拽效果的方法、系统及存储介质。

技术介绍

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

技术实现思路

[0006]本专利技术提供了基于vue3指令实现悬浮拖拽效果的方法、系统及存储介质，基于Vue3框架开发设计一个指令，可实现在页面中任意位置悬浮任意元素，并提供拖拽功能，使元素可上下左右任意拖拽；并且可通过配置、设置元素是否允许任意位置拖拽及放置。
[0007]为解决上述技术问题，本专利技术是通过以下技术方案实现的：
[0008]本专利技术的基于vue3指令实现悬浮拖拽效果的方法，包括如下步骤：
[0009]S1、获取指令绑定的元素及参数；
[0010]S2、指令绑定元素挂载时，对参数进行检测及初始化；具体是当指令元素的所有节点挂载完成或者有节点更新后，触发指令的钩子回调，在回调中获取指令配置的值、参数、修饰符，对功能的参数进行配置；
[0011]S3、指令绑定元素及参数更新时，对参数进行检测及初始化；
[0012]S4、页面卸载或者元素卸载时，对元素的监听事件进行移出。
[0013]进一步地，所述S1步骤具体是：当在DOM元素上使用自定义指令时，在指令钩子回调中获取指令绑定的DOM元素，并同时获取包括指令传递的值、参数、修饰符、元素的属性数据。
[0014]进一步地，所述S2步骤包括如下分步骤：
[0015]S21、获取元素挂载位置，将元素挂载到指定位置，默认页面body标签；
[0016]S22、获取元素设置的初始位置，并将元素悬浮在初始位置，正数的坐标点为左上，负数的坐标点为右下；
[0017]S23、获取元素设置的单元，默认为像素；
[0018]S24、根据参数判断元素是否可以进行拖动，若指令配置了drag参数，元素允许拖动，否则不允许，默认为不允许；
[0019]S25、根据参数判断元素是否可以进行上下拖动，默认允许上下左右拖动，若指令配置了horizontal修饰符，则禁止左右拖动；
[0020]S26、根据参数判断元素是否可以进行左右拖动，默认允许上下左右拖动，若指令配置了vertical，则禁止上下拖动；
[0021]S27、根据参数判断元素是否可以放置在页面中的左右任意位置，默认根据重点位置进行左右吸边，若指令配置了anywhere修饰符，则元素可放置页面中任意位置；
[0022]S28、配置指令元素的上下左右的边界位置，使元素在指定位置进行拖拽；通过配置元素的pin
‑
boundary属性进行边界配置，值为长度为4的数组，分别对应上右下左四个位置。
[0023]进一步地，所述S3步骤具体包括如下分步骤：
[0024]S31、获取元素挂载位置，将元素挂载到指定位置，默认页面body标签；
[0025]S32、获取元素设置的初始位置，并将元素悬浮在初始位置，正数的坐标点为左上，负数的坐标点为右下；
[0026]S33、获取元素设置的单位，默认为像素；
[0027]S34、根据参数判断元素是否可以进行拖动，若指令配置了drag参数，元素允许拖动，否则不允许，默认不允许；
[0028]S35、启动元素的事件监听器，对元素的单手指触摸事件进行监听；
[0029]S36、根据参数判断元素是否可以进行上下拖动，默认允许上下左右拖动，若指令配置了horizontal修饰符，则禁止左右拖动；
[0030]S37、据参数判断元素是否可以进行左右拖动，默认允许上下左右拖动，若指令配置了vertical，则禁止上下拖动；
[0031]S38、根据参数判断元素是否可以放置在页面中的左右任意位置，默认根据中点位置进行左右吸边，若指令配置了anywhere修饰符，则元素可放置页面中任意位置；
[0032]S39、配置指令元素的上下左右的边界位置，使元素在指定位置中进行拖拽；通过配置元素的pin
‑
boundary属性进行边界配置，值为长度为4的数组。
[0033]进一步地，所述单手指触摸事件包括在移动设备中监听单手指触碰事件、单手指的按下移动事件、单手指的松开事件、在PC端中监听鼠标按下事件、鼠标按下移动事件、鼠标松开事件。
[0034]进一步地，所述S4步骤具体是移除在移动设备中监听单手指触碰事件，单手指的按下移动事件，单手指的松开事件；在PC端中监听鼠标按下事件，鼠标按下移动事件，鼠标松开事件。
[0035]基于vue3指令实现悬浮拖拽效果的系统，包括存储器、处理器及存储在所述存储器上且在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述基于vue3指令实现悬浮拖拽效果的方法的步骤。
[0036]一种计算机存储介质，其上存储有计算机程序，所述计算机程序被计算机执行时实现如上述基于vue3指令实现悬浮拖拽效果的方法的步骤。
[0037]本专利技术相对于现有技术包括有以下有益效果：
[0038]本专利技术提供了多个参数，对悬浮及拖拽等功能进行配置；使用正数数值，设置元素左上角位置，使用负数方式，设置元素右下角位置，因此在使用中减少了元素位置的计算；提供多个参数，对元素拖拽功能进行自定义配置，包括：元素初识位置、是否允许拖拽、拖拽左右边界等；基于Vue3框架开发设计一个指令，可实现在页面中任意位置悬浮任意元素，并提供拖拽功能，使元素可上下左右任意拖拽；并且可通过配置、设置元素是否允许任意位置拖拽及放置。
[0039]当然，实施本专利技术的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
[0040]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介本文档来自技高网...

【技术保护点】

【技术特征摘要】
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、获取元素挂载位置，将元素挂载到指...

【专利技术属性】
技术研发人员：乔明辉，王培，
申请(专利权)人：上海悦米信息技术有限公司，
类型：发明
国别省市：