CN118395028B - 一种生成鼠标可拖动弹窗的方法及系统 - Google Patents

Abstract

本发明涉及弹窗生成领域，具体公开一种生成鼠标可拖动弹窗的方法及系统，定义一个用于存储弹窗id的数组变量；定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定addDiv函数；定义一个弹窗dom并配置属性，包括将vue框架的v‑for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上；当点击添加按钮后，触发执行addDiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v‑for循环功能渲染出一个新的弹窗；根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作。本发明能动态生成数量不定的可由鼠标拖动的弹窗dom，使开发更灵活，更具有泛用性。

Description

一种生成鼠标可拖动弹窗的方法及系统

技术领域

本发明涉及弹窗生成领域，具体涉及一种生成鼠标可拖动弹窗的方法及系统。

背景技术

在当前的Web开发中，弹窗（也称为模态框或对话框）是一种常见的用户界面元素，用于向用户展示信息、接收用户输入或执行特定的操作。然而，传统的弹窗往往缺乏交互性，特别是当需要在页面上同时展示多个弹窗时，如何有效地生成动态数量并同时实现鼠标可拖动功能的弹窗成为了一个挑战。

传统的弹窗管理方法往往依赖于静态的HTML结构和固定的JavaScript逻辑，这限制了弹窗的灵活性和可维护性。随着前端框架如Vue.js的普及，数据驱动的开发模式为弹窗的管理提供了新的思路。然而，即使使用了前端框架，如何在保持数据驱动的同时，实现弹窗的拖动功能，依然是一个需要解决的问题。

目前，虽然有一些第三方库或插件可以实现拖动功能，但这些库或插件往往具有较大的体积和复杂的配置，不利于轻量级和定制化的开发需求。

发明内容

为解决上述问题，本发明提供一种生成鼠标可拖动弹窗的方法，能动态生成数量不定的可由鼠标拖动的弹窗dom，使开发更灵活，更具有泛用性，适用于各种不同应用场景的开发需求。

第一方面，本发明的技术方案提供一种生成鼠标可拖动弹窗的方法，包括以下步骤：

定义一个用于存储弹窗id的数组变量；

定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定addDiv函数，addDiv函数用于为新增弹窗制定弹窗id，并将弹窗id添加到数组变量中；

定义一个弹窗dom，为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上；

当点击添加按钮后，触发执行addDiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗；

根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作。

在一个可选的实施方式中，addDiv函数为新增弹窗制定弹窗id，具体包括：

使用.length属性获取数组变量中元素的数量；

将所述数量作为序号；

将弹窗id制定为dom+序号的形式。

在一个可选的实施方式中，点击添加按钮之前，还包括以下步骤：

设置所有弹窗dom样式，包括弹窗位置为绝对定位、绝对定位初始位置。

在一个可选的实施方式中，页面通过v-for循环功能渲染出一个新的弹窗，具体包括：

根据设置的弹窗dom样式渲染出一个新的弹窗；

在弹窗中显示弹窗id。

在一个可选的实施方式中，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上，具体包括：

将预定义的鼠标落下事件方法绑定到弹窗dom的鼠标落下事件上；

将预定义的鼠标移动事件方法绑定到弹窗dom的鼠标移动事件上；

将预定义的鼠标移出事件方法绑定到弹窗dom的鼠标移出事件上；

在mounted生命周期中，定义鼠标抬起方法用于监听全局鼠标抬起事件。

在一个可选的实施方式中，点击添加按钮之前，还包括以下步骤：

定义一个用于记录当前被拖拽弹窗的弹窗信息的弹窗变量；

定义一个用于记录当前鼠标指针位置信息的鼠标位置变量。

在一个可选的实施方式中，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标移动到目标弹窗上按下时触发鼠标落下事件方法，具体包括：

鼠标移动到目标弹窗上按下，触发鼠标落下事件监听器，获取目标弹窗id和$event参数；

调用document对象的getElementById方法并执行，以通过目标弹窗id获取目标弹窗对象，将目标弹窗对象赋值给弹窗变量；

通过$event参数获取当前鼠标坐标值，并将当前鼠标坐标值赋给鼠标位置变量；

若鼠标抬起，则触发鼠标抬起方法以将弹窗变量置空。

在一个可选的实施方式中，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标拖拽目标弹窗时触发鼠标移动事件方法，具体包括：

鼠标移动时触发鼠标移动事件监听器，通过获取$event参数；

判断弹窗变量是否为空；

若为空，则结束鼠标移动事件方法；

若不为空，则从弹窗变量中获取当前目标弹窗的坐标值，通过$event参数获取当前鼠标坐标值；

从鼠标位置变量中获取鼠标移动前的坐标值；

通过以下公式计算鼠标移动结束后目标弹窗的坐标值，

鼠标移动结束后目标弹窗的坐标值=当前目标弹窗的坐标值+当前鼠标坐标值-鼠标移动前的坐标值；

计算结束后，更新鼠标位置变量中的鼠标指针位置为最新的鼠标坐标值；

采用模板字符串格式，将弹窗dom样式中的弹窗绝对位置更新为所计算鼠标移动结束后目标弹窗的坐标值。

在一个可选的实施方式中，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标拖拽目标弹窗并离开后触发鼠标移出事件方法，具体包括：

当鼠标拖拽目标弹窗并离开时触发鼠标移出事件监听器；

判断弹窗变量是否为空；

若为空，则结束鼠标移出事件方法；

若不为空，则根据弹窗变量中的弹窗id判断离开的弹窗是否为当前选中的弹窗；

若是，则将弹窗变量置空。

第二方面，本发明的技术方案提供一种生成鼠标可拖动弹窗的系统，包括，

变量定义模块：定义一个用于存储弹窗id的数组变量；

添加按钮dom定义模块：定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定addDiv函数，addDiv函数用于为新增弹窗制定弹窗id，并将弹窗id添加到数组变量中；

弹窗dom定义模块：定义一个弹窗dom，为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上；

弹窗生成模块：当点击添加按钮后，触发执行addDiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗；

弹窗拖动模块：根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作。

本发明提供的一种生成鼠标可拖动弹窗的方法及系统，相对于现有技术，具有以下有益效果：通过定义一个用于存储弹窗id的数组变量，结合Vue.js的v-for循环功能，实现了弹窗的动态生成和管理，当需要添加弹窗时，只需点击添加按钮自动触发修改数组变量即可，无需修改HTML结构和JavaScript逻辑，实现动态生成数量不定的弹窗，使开发更灵活，更具有泛用性，适用于各种不同应用场景的开发需求；同时通过绑定预定义的鼠标事件方法到弹窗dom的鼠标事件上，实现了弹窗的拖动功能，用户可以通过鼠标拖动来移动弹窗的位置，提高了用户体验和交互性；另外，该方法仅依赖于Vue.js框架和自定义的JavaScript逻辑，无需引入额外的第三方库或插件，因此具有较小的体积和较高的定制化程度。

附图说明

为了更清楚的说明本发明实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种生成鼠标可拖动弹窗的方法流程示意图。

图2是添加一个弹窗示意图。

图3是添加4个弹窗示意图。

图4是本发明实施例提供的一种生成鼠标可拖动弹窗的系统结构示意框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。

以下对本发明涉及的部分术语进行解释。

1、vue：一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和JavaScript 构建，并提供了一套声明式的、组件化的编程模型。Vue具有双向绑定的特性，其中data字段用于存储全局变量。Vue对dom提供v-on指令，用于把事件监听器绑定在特定dom上，简写为@。本实施例中涉及的事件监听器包括@click（鼠标点击事件，即鼠标按下并抬起），@mousedown（鼠标按下事件），@mousemove（鼠标移动事件），@mouseout（鼠标移出dom事件）等。

Vue实例从创建到销毁的整个过程分为数个阶段，被称为vue生命周期。本实施例中涉及到其中的mounted（挂载后）阶段，此时实例已经挂载到DOM上，可以获取数据和DOM元素。

2、JavaScript：以下简称为js，一种具有函数优先的轻量级，解释型或即时编译型的编程语言，基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

3、Document Object Model：以下简称dom，是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

4、UserInterface：以下简称ui，是指对软件的人机交互、操作逻辑、界面美观的整体设计。通常包括平面设计，网页设计以及移动界面设计。

5、Node.js：一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台。

6、$event：vue通过 固定参数$event 可以访问原生事件对象，其中包含了事件发生时的所有信息和参数，方便对事件进行处理和调用。

7、HTML：超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

8、document：当浏览器加载完毕html文档后，将会创建一个document对象。这个对象是逻辑树中的Document节点，实现了HTML的Document接口。这个对象包含了整个html文档的信息，可以通过这个对象对html页面中的所有元素进行访问和操作。

图1是本发明实施例提供的一种生成鼠标可拖动弹窗的方法流程示意图。其中，图1执行主体可以为一种生成鼠标可拖动弹窗的系统。本发明实施例提供的生成鼠标可拖动弹窗的方法由计算机设备执行，相应地，生成鼠标可拖动弹窗的系统运行于计算机设备中。根据不同的需求，该流程图中步骤的顺序可以改变，某些可以省略。

如图1所示，该方法包括以下步骤。

S1，定义一个用于存储弹窗id的数组变量。

数组变量是一个全局变量，当新增弹窗时，生成弹窗id保存到这个全局变量中，数组变量的变化触发在页面生成弹窗。

S2，定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定addDiv函数，addDiv函数用于为新增弹窗制定弹窗id，并将弹窗id添加到数组变量中。

预先定义addDiv函数，鼠标点击添加按钮时触发执行addDiv函数，addDiv函数为新增弹窗制定弹窗id，并将弹窗id添加到数组变量中。

S3，定义一个弹窗dom，为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上。

预先配置弹窗dom的属性，页面根据弹窗dom属性生成弹窗，生成的弹窗可用鼠标拖动。

S4，当点击添加按钮后，触发执行addDiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗。

S5，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作。

本实施例的生成鼠标可拖动弹窗的方法，能动态生成数量不定的可由鼠标拖动的弹窗dom，使开发更灵活，更具有泛用性，适用于各种不同应用场景的开发需求，变相降低了ui设计的难度，能提供更好的网页视觉效果。

为进一步理解本发明，以下对本发明进一步详细说明，包括预定义部分和弹窗处理逻辑部分。

（1）预定义部分。

SS1，定义一个用于存储弹窗id的数组变量。

自定义一个全局变量，本实施例中命名为divArr，用于存储动态生成弹窗所对应id的数组。

SS2，定义一个用于记录当前被拖拽弹窗的弹窗信息的弹窗变量。

自定义一个全局变量，本实施例中命名为chosen，用于记录当前被拖拽的弹窗信息，包括弹窗id、弹窗位置、弹窗样式等所有弹窗的信息。

SS3，定义一个用于记录当前鼠标指针位置信息的鼠标位置变量。

自定义一个全局变量为对象，本实施例中命名为position，包含两个参数x，y，用于记录当前鼠标指针位置信息。

SS4，定义一个添加按钮dom。

为方便描述实施过程起见，使用html原生的button标签自定义一个按钮dom，同时自定义一个js方法addDiv绑定在这个按钮的点击事件@click上。

<button @click="addDiv">添加</button>

addDiv方法的作用是将一个新的id添加到之前定义的数组变量divArr中，id的命名为方便起见，采用dom + 序号的形式。此处使用js方法.length获取divArr中元素的数量作为序号。

this.divArr.push('dom' + this.divArr.length)

SS5，定义一个弹窗dom。

自定义一个dom用于承载弹窗，下文将称之为弹窗dom。为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上。

具体地，方便起见，将dom的类class设为domBox。使用vue提供的v-for循环功能绑定divArr数组，同时动态绑定id为该数组中对应的元素item，从而通过增加divArr数组内元素的数量实现弹窗的动态生成。需要说明的是，为了方便区分不同的弹窗，将每个弹窗对应的id即item显示在弹窗中。

本实施例中，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上包括：将预定义的鼠标落下事件方法绑定到弹窗dom的鼠标落下事件上；将预定义的鼠标移动事件方法绑定到弹窗dom的鼠标移动事件上；将预定义的鼠标移出事件方法绑定到弹窗dom的鼠标移出事件上；在mounted生命周期中，定义鼠标抬起方法用于监听全局鼠标抬起事件。

具体地，自定义js方法mouseDown，mouseMove，mouseOut分别绑定到dom的鼠标落下事件@mousedown，鼠标移动事件@mousemove，鼠标移出事件@mouseout上，并使用参数$event获取事件信息。

<div class="domBox"

:id="item"

v-for="(item, index) in divArr"

:key="index"

@mousedown="mouseDown(item, $event)"

@mousemove="mouseMove($event)"

@mouseout="mouseOut(item)">{{item}}</div>

在mounted生命周期中，自定义js方法mouseUp用于监听全局鼠标抬起事件。

window.onmouseup = this.mouseUp

本实施例预先设置所有弹窗dom样式，包括弹窗位置为绝对定位、绝对定位初始位置。

具体地，

在css部分通过类选择器.domBox设置所有弹窗dom样式。设置position为absolute绝对定位。为方便展示起见，将dom设置为宽高为100px的灰色方块，通过top和left设置绝对定位初始位置。

.domBox {

position: absolute;

top: 200px;

left: 200px;

background-color: gray;

width: 100px;

height: 100px;

text-align: center;

line-height: 100px;

font-size: 30px;

user-select: none; // 美观起见令dom内文字内容（即对应弹窗id）无法选择

}

（2）弹窗处理逻辑部分。

SS6，当点击添加按钮后，触发执行addDiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗。

点击添加按钮后，随着全局变量数组divArr中元素的增加，页面将通过v-for自动渲染一个弹窗dom出来。具体地，根据设置的弹窗dom样式渲染出一个新的弹窗，在弹窗中显示弹窗id。图2是添加一个弹窗示意图，图3是添加4个弹窗示意图。

SS7，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作。

SS7.1，当鼠标移动到目标弹窗上按下时触发鼠标落下事件方法。

SS7.1.1，鼠标移动到目标弹窗上按下，触发鼠标落下事件监听器，获取目标弹窗id和$event参数。

SS7.1.2，调用document对象的getElementById方法并执行，以通过目标弹窗id获取目标弹窗对象，将目标弹窗对象赋值给弹窗变量。

SS7.1.3，通过$event参数获取当前鼠标坐标值，并将当前鼠标坐标值赋给鼠标位置变量。

SS7.1.4，若鼠标抬起，则触发鼠标抬起方法以将弹窗变量置空。

鼠标移动到目标弹窗dom上按下，此时将触发@mousedown事件监听器，获取item（即当前dom的id，在方法中命名为id）与$event（即当前事件对象，在方法中命名为e）两个参数并执行自定义js方法mouseDown。

在这个方法中，调用document对象提供的方法getElementById，通过当前弹窗dom的id获取对应的弹窗dom对象，并将这个对象赋值给全局变量chosen。

this.chosen = document.getElementById(id)

同时，通过当前事件对象e（即$event获取到的事件对象）获取当前鼠标坐标值，并赋给全局变量position中的两个参数。

this.position.x = e.clientX

this.position.y = e.clientY

当鼠标抬起后，则触发之前mounted生命周期中onmouseup事件监听器绑定的自定义方法mouseUp。

在这个方法中，置空chosen以表示当前没有选中dom。

this.chosen = null

SS7.2，当鼠标拖拽目标弹窗时触发鼠标移动事件方法。

SS7.2.1，鼠标移动时触发鼠标移动事件监听器，通过获取$event参数。

SS7.2.2，判断弹窗变量是否为空。

SS7.2.3，若为空，则结束鼠标移动事件方法。

SS7.2.4，若不为空，则从弹窗变量中获取当前目标弹窗的坐标值，通过$event参数获取当前鼠标坐标值。

SS7.2.5，从鼠标位置变量中获取鼠标移动前的坐标值。

SS7.2.6，通过以下公式计算鼠标移动结束后目标弹窗的坐标值，

鼠标移动结束后目标弹窗的坐标值=当前目标弹窗的坐标值+当前鼠标坐标值-鼠标移动前的坐标值。

SS7.2.7，计算结束后，更新鼠标位置变量中的鼠标指针位置为最新的鼠标坐标值。

SS7.2.8，采用模板字符串格式，将弹窗dom样式中的弹窗绝对位置更新为所计算鼠标移动结束后目标弹窗的坐标值。

鼠标对弹窗dom实现拖拽行为，在事件层面上可以解释为鼠标在弹窗dom内部按下后，在不触发抬起事件的情况下进行移动。鼠标移动时触发@mousemove监听器，执行自定义js方法mouseMove，同时通过$event获取事件对象作为参数，在方法中命名为e。

在方法执行的最开始，需要判断鼠标是否处于按下状态而未抬起。由于抬起后触发mouseUp方法会将全局变量chosen置空，则chosen为空就代表鼠标并未处于按下状态。

if (this.chosen === null) {

return // 既然不处于选中状态，则方法立即结束

}

若chosen不为空，则代表chosen为当前选中dom的dom对象，可以通过chosen中的offsetLeft和offsetTop参数获取当前dom的x、y轴位置。

同时，可以通过事件对象e中的clientX和clientY参数获取当前鼠标的x、y轴位置。

最后，通过全局变量position中的x和y参数获取鼠标移动前的x、y轴位置。

当前dom位置 + 当前鼠标位置 - 鼠标移动前位置，以这个公式可以计算出鼠标移动结束后dom的x、y轴定位。定义两个局部变量left、top用于存储两个改变量。

let left = this.chosen.offsetLeft + e.clientX - this.position.x

let top = this.chosen.offsetTop + e.clientY - this.position.y

计算完后，需要更新全局变量position中的鼠标位置。

this.position.x = e.clientX

this.position.y = e.clientY

本实施例中，由于css设置将dom设置为绝对定位，可以通过修改chosen中style参数里的left、top参数来改变弹窗dom的绝对位置。此处采用模板字符串格式，将这两个参数修改为刚刚计算得到的两个局部变量。

this.chosen.style.left = `${left}px`

this.chosen.style.top = `${top}px`

至此，在鼠标抬起后，一次完整的拖动行为就完成了。

SS7.3，当鼠标拖拽目标弹窗并离开后触发鼠标移出事件方法。

SS7.3.1，当鼠标拖拽目标弹窗并离开时触发鼠标移出事件监听器。

SS7.3.2，判断弹窗变量是否为空。

SS7.3.3，若为空，则结束鼠标移出事件方法。

SS7.3.4，若不为空，则根据弹窗变量中的弹窗id判断离开的弹窗是否为当前选中的弹窗。

SS7.3.5，若是，则将弹窗变量置空。

由于页面渲染的速度和鼠标本身移动速度存在差异，有可能出现鼠标移动过快以至于离开dom的情况，此时会触发@mouseout事件监听器，执行用于处理这种情况的mouseOut方法。

if (this.chosen === null) { // 如果尚未选中DOM

return // 立即退出方法

}

if (this.chosen.id === id) { // 如果离开的DOM是当前选中的DOM

this.chosen = null // 则将选中的DOM置空

}

上文中对于一种生成鼠标可拖动弹窗的方法的实施例进行了详细描述，基于上述实施例描述的生成鼠标可拖动弹窗的方法，本发明实施例还提供了一种与该方法对应的生成鼠标可拖动弹窗的系统。

图4是本发明实施例提供的一种生成鼠标可拖动弹窗的系统结构示意框图，生成鼠标可拖动弹窗的系统根据其所执行的功能，可以被划分为多个功能模块，如图4所示。所述功能模块可以包括：变量定义模块、添加按钮dom定义模块、弹窗dom定义模块、弹窗生成模块、弹窗拖动模块。本发明所称的模块是指一种能够被至少一个处理器所执行并且能够完成固定功能的一系列计算机程序段，其存储在存储器中。

变量定义模块：定义一个用于存储弹窗id的数组变量。

添加按钮dom定义模块：定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定addDiv函数，addDiv函数用于为新增弹窗制定弹窗id，并将弹窗id添加到数组变量中。

弹窗dom定义模块：定义一个弹窗dom，为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上。

弹窗生成模块：当点击添加按钮后，触发执行addDiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗。

弹窗拖动模块：根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作。

在一个可选的实施方式中，变量定义模块还用于定义一个用于记录当前被拖拽弹窗的弹窗信息的弹窗变量；定义一个用于记录当前鼠标指针位置信息的鼠标位置变量。

本实施例的生成鼠标可拖动弹窗的系统用于实现前述的生成鼠标可拖动弹窗的方法，因此该系统中的具体实施方式可见前文中的生成鼠标可拖动弹窗的方法的实施例部分，所以，其具体实施方式可以参照相应的各个部分实施例的描述，在此不再展开介绍。

另外，由于本实施例的生成鼠标可拖动弹窗的系统用于实现前述的生成鼠标可拖动弹窗的方法，因此其作用与上述方法的作用相对应，这里不再赘述。

以上公开的仅为本发明的优选实施方式，但本发明并非局限于此，任何本领域的技术人员能思之的没有创造性的变化，以及在不脱离本发明原理前提下所作的若干改进和润饰，都应落在本发明的保护范围内。

Claims (7)

1.一种生成鼠标可拖动弹窗的方法，其特征在于，包括以下步骤：

定义一个用于存储弹窗id的数组变量；

定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定addDiv函数，addDiv函数用于为新增弹窗制定弹窗id，并将弹窗id添加到数组变量中；数组变量是一个全局变量，当新增弹窗时，生成弹窗id保存到这个全局变量中，数组变量的变化触发在页面生成弹窗；

定义一个弹窗dom，为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上；预先配置弹窗dom的属性，页面根据弹窗dom属性生成弹窗，生成的弹窗可用鼠标拖动；

当点击添加按钮后，触发执行addDiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗；

根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作；

addDiv函数为新增弹窗制定弹窗id，具体包括：

使用.length属性获取数组变量中元素的数量；

将所述数量作为序号；

将弹窗id制定为dom+序号的形式；

根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标移动到目标弹窗上按下时触发鼠标落下事件方法，具体包括：

鼠标移动到目标弹窗上按下，触发鼠标落下事件监听器，获取目标弹窗id和$event参数；

调用document对象的getElementById方法并执行，以通过目标弹窗id获取目标弹窗对象，将目标弹窗对象赋值给弹窗变量；

通过$event参数获取当前鼠标坐标值，并将当前鼠标坐标值赋给鼠标位置变量；

若鼠标抬起，则触发鼠标抬起方法以将弹窗变量置空；

根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标拖拽目标弹窗时触发鼠标移动事件方法，具体包括：

鼠标移动时触发鼠标移动事件监听器，通过获取$event参数；

判断弹窗变量是否为空；

若为空，则结束鼠标移动事件方法；

若不为空，则从弹窗变量中获取当前目标弹窗的坐标值，通过$event参数获取当前鼠标坐标值；

从鼠标位置变量中获取鼠标移动前的坐标值；

通过以下公式计算鼠标移动结束后目标弹窗的坐标值，

鼠标移动结束后目标弹窗的坐标值=当前目标弹窗的坐标值+当前鼠标坐标值-鼠标移动前的坐标值；

计算结束后，更新鼠标位置变量中的鼠标指针位置为最新的鼠标坐标值；

采用模板字符串格式，将弹窗dom样式中的弹窗绝对位置更新为所计算鼠标移动结束后目标弹窗的坐标值。

2.根据权利要求1所述的生成鼠标可拖动弹窗的方法，其特征在于，点击添加按钮之前，还包括以下步骤：

设置所有弹窗dom样式，包括弹窗位置为绝对定位、绝对定位初始位置。

3.根据权利要求2所述的生成鼠标可拖动弹窗的方法，其特征在于，页面通过v-for循环功能渲染出一个新的弹窗，具体包括：

根据设置的弹窗dom样式渲染出一个新的弹窗；

在弹窗中显示弹窗id。

4.根据权利要求1-3任一项所述的生成鼠标可拖动弹窗的方法，其特征在于，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上，具体包括：

将预定义的鼠标落下事件方法绑定到弹窗dom的鼠标落下事件上；

将预定义的鼠标移动事件方法绑定到弹窗dom的鼠标移动事件上；

将预定义的鼠标移出事件方法绑定到弹窗dom的鼠标移出事件上；

在mounted生命周期中，定义鼠标抬起方法用于监听全局鼠标抬起事件。

5.根据权利要求4所述的生成鼠标可拖动弹窗的方法，其特征在于，点击添加按钮之前，还包括以下步骤：

定义一个用于记录当前被拖拽弹窗的弹窗信息的弹窗变量；

定义一个用于记录当前鼠标指针位置信息的鼠标位置变量。

6.根据权利要求5所述的生成鼠标可拖动弹窗的方法，其特征在于，根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标拖拽目标弹窗并离开后触发鼠标移出事件方法，具体包括：

当鼠标拖拽目标弹窗并离开时触发鼠标移出事件监听器；

判断弹窗变量是否为空；

若为空，则结束鼠标移出事件方法；

若不为空，则根据弹窗变量中的弹窗id判断离开的弹窗是否为当前选中的弹窗；

若是，则将弹窗变量置空。

7.一种生成鼠标可拖动弹窗的系统，其特征在于，包括，

变量定义模块：定义一个用于存储弹窗id的数组变量；

添加按钮dom定义模块：定义一个添加按钮dom，并为添加按钮dom的鼠标点击事件绑定addDiv函数，addDiv函数用于为新增弹窗制定弹窗id，并将弹窗id添加到数组变量中；数组变量是一个全局变量，当新增弹窗时，生成弹窗id保存到这个全局变量中，数组变量的变化触发在页面生成弹窗；

弹窗dom定义模块：定义一个弹窗dom，为弹窗dom配置属性，包括将vue框架的v-for循环功能绑定数组变量，并动态绑定弹窗dom的id为数组变量中的元素，将预定义的鼠标事件方法绑定到弹窗dom的鼠标事件上；预先配置弹窗dom的属性，页面根据弹窗dom属性生成弹窗，生成的弹窗可用鼠标拖动；

弹窗生成模块：当点击添加按钮后，触发执行addDiv函数生成新增弹窗的弹窗id并将该弹窗id增加到数组变量中，数组变量中元素增加触发页面通过v-for循环功能渲染出一个新的弹窗；

弹窗拖动模块：根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作；

addDiv函数用于为新增弹窗制定弹窗id，具体包括：

使用.length属性获取数组变量中元素的数量；

将所述数量作为序号；

将弹窗id制定为dom+序号的形式；

根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标移动到目标弹窗上按下时触发鼠标落下事件方法，具体包括：

鼠标移动到目标弹窗上按下，触发鼠标落下事件监听器，获取目标弹窗id和$event参数；

调用document对象的getElementById方法并执行，以通过目标弹窗id获取目标弹窗对象，将目标弹窗对象赋值给弹窗变量；

通过$event参数获取当前鼠标坐标值，并将当前鼠标坐标值赋给鼠标位置变量；

若鼠标抬起，则触发鼠标抬起方法以将弹窗变量置空；

根据鼠标动作执行鼠标事件方法以对弹窗进行拖动操作，包括当鼠标拖拽目标弹窗时触发鼠标移动事件方法，具体包括：

鼠标移动时触发鼠标移动事件监听器，通过获取$event参数；

判断弹窗变量是否为空；

若为空，则结束鼠标移动事件方法；

若不为空，则从弹窗变量中获取当前目标弹窗的坐标值，通过$event参数获取当前鼠标坐标值；

从鼠标位置变量中获取鼠标移动前的坐标值；

通过以下公式计算鼠标移动结束后目标弹窗的坐标值，

鼠标移动结束后目标弹窗的坐标值=当前目标弹窗的坐标值+当前鼠标坐标值-鼠标移动前的坐标值；

计算结束后，更新鼠标位置变量中的鼠标指针位置为最新的鼠标坐标值；

采用模板字符串格式，将弹窗dom样式中的弹窗绝对位置更新为所计算鼠标移动结束后目标弹窗的坐标值。