【技术实现步骤摘要】
本专利技术涉及弹窗生成领域，具体涉及一种生成鼠标可拖动弹窗的方法及系统。
技术介绍
1、在当前的web开发中，弹窗（也称为模态框或对话框）是一种常见的用户界面元素，用于向用户展示信息、接收用户输入或执行特定的操作。然而，传统的弹窗往往缺乏交互性，特别是当需要在页面上同时展示多个弹窗时，如何有效地生成动态数量并同时实现鼠标可拖动功能的弹窗成为了一个挑战。
2、传统的弹窗管理方法往往依赖于静态的html结构和固定的javascript逻辑，这限制了弹窗的灵活性和可维护性。随着前端框架如vue.js的普及，数据驱动的开发模式为弹窗的管理提供了新的思路。然而，即使使用了前端框架，如何在保持数据驱动的同时，实现弹窗的拖动功能，依然是一个需要解决的问题。
3、目前，虽然有一些第三方库或插件可以实现拖动功能，但这些库或插件往往具有较大的体积和复杂的配置，不利于轻量级和定制化的开发需求。
技术实现思路
1、为解决上述问题，本专利技术提供一种生成鼠标可拖动弹窗的方法，能动态生成数量不定的可由鼠标拖动的弹窗dom，使开发更灵活，更具有泛用性，适用于各种不同应用场景的开发需求。
2、第一方面，本专利技术的技术方案提供一种生成鼠标可拖动弹窗的方法，包括以下步骤：
3、定义一个用于存储弹窗id的数组变量；
4、定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定adddiv函数，adddiv函数用于为新增弹窗制定弹窗id，并将弹窗id添加到
5、定义一个弹窗dom，为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上；
6、当点击添加按钮后，触发执行adddiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗；
7、根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作。
8、在一个可选的实施方式中，adddiv函数为新增弹窗制定弹窗id，具体包括：
9、使用.length属性获取数组变量中元素的数量；
10、将所述数量作为序号；
11、将弹窗id制定为dom+序号的形式。
12、在一个可选的实施方式中，点击添加按钮之前，还包括以下步骤：
13、设置所有弹窗dom样式，包括弹窗位置为绝对定位、绝对定位初始位置。
14、在一个可选的实施方式中，页面通过v-for循环功能渲染出一个新的弹窗，具体包括：
15、根据设置的弹窗dom样式渲染出一个新的弹窗；
16、在弹窗中显示弹窗id。
17、在一个可选的实施方式中，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上，具体包括：
18、将预定义的鼠标落下事件方法绑定到弹窗dom的鼠标落下事件上；
19、将预定义的鼠标移动事件方法绑定到弹窗dom的鼠标移动事件上；
20、将预定义的鼠标移出事件方法绑定到弹窗dom的鼠标移出事件上；
21、在mounted生命周期中，定义鼠标抬起方法用于监听全局鼠标抬起事件。
22、在一个可选的实施方式中，点击添加按钮之前，还包括以下步骤：
23、定义一个用于记录当前被拖拽弹窗的弹窗信息的弹窗变量；
24、定义一个用于记录当前鼠标指针位置信息的鼠标位置变量。
25、在一个可选的实施方式中，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标移动到目标弹窗上按下时触发鼠标落下事件方法，具体包括：
26、鼠标移动到目标弹窗上按下，触发鼠标落下事件监听器，获取目标弹窗id和$event参数；
27、调用document对象的getelementbyid方法并执行，以通过目标弹窗id获取目标弹窗对象，将目标弹窗对象赋值给弹窗变量；
28、通过$event参数获取当前鼠标坐标值，并将当前鼠标坐标值赋给鼠标位置变量；
29、若鼠标抬起，则触发鼠标抬起方法以将弹窗变量置空。
30、在一个可选的实施方式中，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标拖拽目标弹窗时触发鼠标移动事件方法，具体包括：
31、鼠标移动时触发鼠标移动事件监听器，通过获取$event参数；
32、判断弹窗变量是否为空；
33、若为空，则结束鼠标移动事件方法；
34、若不为空，则从弹窗变量中获取当前目标弹窗的坐标值，通过$event参数获取当前鼠标坐标值；
35、从鼠标位置变量中获取鼠标移动前的坐标值；
36、通过以下公式计算鼠标移动结束后目标弹窗的坐标值，
37、鼠标移动结束后目标弹窗的坐标值=当前目标弹窗的坐标值+当前鼠标坐标值-鼠标移动前的坐标值；
38、计算结束后，更新鼠标位置变量中的鼠标指针位置为最新的鼠标坐标值；
39、采用模板字符串格式，将弹窗dom样式中的弹窗绝对位置更新为所计算鼠标移动结束后目标弹窗的坐标值。
40、在一个可选的实施方式中，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标拖拽目标弹窗并离开后触发鼠标移出事件方法，具体包括：
41、当鼠标拖拽目标弹窗并离开时触发鼠标移出事件监听器；
42、判断弹窗变量是否为空；
43、若为空，则结束鼠标移出事件方法；
44、若不为空，则根据弹窗变量中的弹窗id判断离开的弹窗是否为当前选中的弹窗；
45、若是，则将弹窗变量置空。
46、第二方面，本专利技术的技术方案提供一种生成鼠标可拖动弹窗的系统，包括，
47、变量定义模块：定义一个用于存储弹窗id的数组变量；
48、添加按钮dom定义模块：定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定adddiv函数，adddiv函数用于为新增弹窗制定弹窗id，并将弹窗id添加到数组变量中；
49、弹窗dom定义模块：定义一个弹窗dom，为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上；
50、弹窗生成模块：当点击添加按钮后，触发执行adddiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗；
51、弹窗拖动模块：根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作。
52、本专利技术提供的一种生成鼠标可拖动弹窗的方法及系统，相对于现有技术，具有以下有益效果：通过本文档来自技高网...
【技术保护点】
1.一种生成鼠标可拖动弹窗的方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的生成鼠标可拖动弹窗的方法，其特征在于，addDiv函数为新增弹窗制定弹窗id，具体包括：
3.根据权利要求2所述的生成鼠标可拖动弹窗的方法，其特征在于，点击添加按钮之前，还包括以下步骤：
4.根据权利要求3所述的生成鼠标可拖动弹窗的方法，其特征在于，页面通过v-for循环功能渲染出一个新的弹窗，具体包括：
5.根据权利要求1-4任一项所述的生成鼠标可拖动弹窗的方法，其特征在于，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上，具体包括：
6.根据权利要求5所述的生成鼠标可拖动弹窗的方法，其特征在于，点击添加按钮之前，还包括以下步骤：
7.根据权利要求1所述的生成鼠标可拖动弹窗的方法，其特征在于，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标移动到目标弹窗上按下时触发鼠标落下事件方法，具体包括：
8.根据权利要求7所述的生成鼠标可拖动弹窗的方法，其特征在于，根据鼠标动作执行鼠标事件方法以对弹窗进行拖
9.根据权利要求8所述的生成鼠标可拖动弹窗的方法，其特征在于，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标拖拽目标弹窗并离开后触发鼠标移出事件方法，具体包括：
10.一种生成鼠标可拖动弹窗的系统，其特征在于，包括，
...【技术特征摘要】
1.一种生成鼠标可拖动弹窗的方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的生成鼠标可拖动弹窗的方法，其特征在于，adddiv函数为新增弹窗制定弹窗id，具体包括：
3.根据权利要求2所述的生成鼠标可拖动弹窗的方法，其特征在于，点击添加按钮之前，还包括以下步骤：
4.根据权利要求3所述的生成鼠标可拖动弹窗的方法，其特征在于，页面通过v-for循环功能渲染出一个新的弹窗，具体包括：
5.根据权利要求1-4任一项所述的生成鼠标可拖动弹窗的方法，其特征在于，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上，具体包括：
6.根据权利要求5所述的生成鼠标可拖动弹窗的方法，其特征在于，点击添...
【专利技术属性】
技术研发人员：刘浩宇，张厚森，张健，
申请(专利权)人：浪潮山东农业互联网有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。