A method and system for generating a mouse-dragable pop-up window

Abstract

This invention relates to the field of pop-up generation, specifically disclosing a method and system for generating draggable pop-ups. The method defines an array variable to store pop-up IDs; defines an add button DOM and binds the `addDiv` function to the mouse click event of the add button DOM; defines a pop-up DOM and configures its properties, including binding the Vue framework's `v-for` loop to the array variable and dynamically binding the pop-up DOM's ID to an element in the array variable; and binding predefined mouse event methods to the pop-up DOM's mouse events. When the add button is clicked, the `addDiv` function is executed to generate the ID of the new pop-up and add it to the array variable. Adding an element to the array variable triggers the page to render a new pop-up using the `v-for` loop. Mouse event methods are executed based on mouse actions to allow dragging the pop-up. This invention can dynamically generate a variable number of draggable pop-up DOMs, making development more flexible and versatile.

Description

Technical Field

[0001] The present invention relates to the field of pop-up window generation, and in particular to a method and system for generating a mouse-dragable pop-up window. Background Art

[0002] In current web development, pop-ups (also called modal boxes or dialog boxes) are a common user interface element used to display information to users, receive user input, or perform specific operations. However, traditional pop-ups often lack interactivity, especially when multiple pop-ups need to be displayed on a page at the same time. How to effectively generate a dynamic number of pop-ups and implement mouse-dragging functions at the same time becomes a challenge.

[0003] Traditional pop-up window management methods often rely on static HTML structures and fixed JavaScript logic, which limits the flexibility and maintainability of pop-up windows. With the popularity of front-end frameworks such as Vue.js, data-driven development models provide new ideas for pop-up window management. However, even if a front-end framework is used, how to achieve the dragging function of the pop-up window while maintaining data-driven is still a problem that needs to be solved.

[0004] At present, although there are some third-party libraries or plug-ins that can implement the dragging function, these libraries or plug-ins often have large volumes and complex configurations, which are not conducive to lightweight and customized development needs. Summary of the invention

[0005] To solve the above problems, the present invention provides a method for generating a mouse-draggable pop-up window, which can dynamically generate an indefinite number of mouse-draggable pop-up window DOMs, making development more flexible and versatile, and suitable for development needs of various application scenarios.

[0006] In a first aspect, the technical solution of the present invention provides a method for generating a mouse draggable pop-up window, comprising the following steps:

[0007] Define an array variable for storing pop-up window IDs;

[0008] Define an add button dom, and bind the addDiv function to the mouse click event of the add button dom. The addDiv function is used to set a pop-up window id for the newly added pop-up window and add the pop-up window id to the array variable;

[0009] Define a pop-up window DOM and configure properties for it, including binding the v-for loop function of the Vue framework to an array variable, dynamically binding the id of the pop-up window DOM to the element in the array variable, and binding the predefined mouse event method to the mouse event of the pop-up window DOM;

[0010] When the Add button is clicked, the addDiv function is executed to generate the pop-up window ID of the newly added pop-up window and add the pop-up window ID to the array variable. The addition of elements in the array variable triggers the page to render a new pop-up window through the v-for loop function;

[0011] Execute the mouse event method according to the mouse action to drag the pop-up window.

[0012] In an optional implementation, the addDiv function sets a popup window id for a newly added popup window, specifically including:

[0013] Use the .length property to get the number of elements in an array variable;

[0014] Taking said quantity as a sequence number;

[0015] Set the pop-up window id in the form of dom+serial number.

[0016] In an optional implementation, before clicking the Add button, the following steps are also included:

[0017] Set the DOM style of all pop-up windows, including the absolute positioning of the pop-up window and the absolute positioning initial position.

[0018] In an optional implementation, the page renders a new pop-up window through the v-for loop function, specifically including:

[0019] Render a new pop-up window according to the set pop-up window DOM style;

[0020] Display the popup id in the popup.

[0021] In an optional implementation, the predefined mouse event method is bound to the mouse event of the pop-up window DOM, specifically including:

[0022] Bind the predefined mouse down event method to the mouse down event of the pop-up window DOM;

[0023] Bind the predefined mouse movement event method to the mouse movement event of the pop-up window DOM;

[0024] Bind the predefined mouse out event method to the mouse out event of the pop-up window DOM;

[0025] In the mounted life cycle, define the mouse up method to monitor the global mouse up event.

[0026] In an optional implementation, before clicking the Add button, the following steps are also included:

[0027] Define a pop-up window variable to record the pop-up window information of the currently dragged pop-up window;

[0028] Define a mouse position variable to record the current mouse pointer position information.

[0029] In an optional implementation, a mouse event method is executed according to the mouse action to perform a drag operation on the pop-up window, including triggering a mouse drop event method when the mouse moves to the target pop-up window and is pressed, specifically including:

[0030] Move the mouse to the target pop-up window and press it, triggering the mouse down event listener to obtain the target pop-up window id and $event parameter;

[0031] Call and execute the getElementById method of the document object to obtain the target pop-up window object through the target pop-up window ID, and assign the target pop-up window object to the pop-up window variable;

[0032] Get the current mouse coordinate value through the $event parameter and assign the current mouse coordinate value to the mouse position variable;

[0033] If the mouse is lifted, the mouse lifted method is triggered to set the pop-up window variable to zero.

[0034] In an optional implementation, a mouse event method is executed according to a mouse action to perform a drag operation on a pop-up window, including triggering a mouse movement event method when the mouse drags a target pop-up window, specifically including:

[0035] When the mouse moves, the mouse movement event listener is triggered by obtaining the $event parameter;

[0036] Determine whether the pop-up window variable is empty;

[0037] If it is empty, the mouse movement event method ends;

[0038] If it is not empty, get the coordinate value of the current target pop-up window from the pop-up window variable, and get the current mouse coordinate value through the $event parameter;

[0039] Get the coordinate value of the mouse before moving from the mouse position variable;

[0040] The coordinate value of the target pop-up window after the mouse moves is calculated using the following formula:

[0041] The coordinate value of the target pop-up window after the mouse moves = the coordinate value of the current target pop-up window + the current mouse coordinate value - the coordinate value before the mouse moves;

[0042] After the calculation is completed, the mouse pointer position in the mouse position variable is updated to the latest mouse coordinate value;

[0043] Using the template string format, the absolute position of the pop-up window in the pop-up window DOM style is updated to the coordinate value of the target pop-up window after the calculated mouse movement is completed.

[0044] In an optional implementation, a mouse event method is executed according to the mouse action to perform a drag operation on the pop-up window, including triggering a mouse exit event method when the mouse drags the target pop-up window and leaves, specifically including:

[0045] When the mouse drags the target pop-up window and leaves it, the mouse exit event listener is triggered;

[0046] Determine whether the pop-up window variable is empty;

[0047] If it is empty, the mouse out event method ends;

[0048] If it is not empty, determine whether the pop-up window being left is the currently selected pop-up window based on the pop-up window id in the pop-up window variable;

[0049] If so, set the popup variable to empty.

[0050] In a second aspect, the technical solution of the present invention provides a system for generating a mouse-draggable pop-up window, comprising:

[0051] Variable definition module: define an array variable for storing pop-up window ID;

[0052] Add button DOM definition module: define an add button DOM, and bind the addDiv function to the mouse click event of the add button DOM. The addDiv function is used to set the pop-up window ID for the new pop-up window and add the pop-up window ID to the array variable;

[0053] Pop-up window DOM definition module: define a pop-up window DOM, configure properties for the pop-up window DOM, including binding the v-for loop function of the Vue framework to an array variable, dynamically binding the id of the pop-up window DOM to the element in the array variable, and binding the predefined mouse event method to the mouse event of the pop-up window DOM;

[0054] Pop-up window generation module: When the add button is clicked, the addDiv function is triggered to generate the pop-up window ID of the newly added pop-up window and add the pop-up window ID to the array variable. The addition of elements in the array variable triggers the page to render a new pop-up window through the v-for loop function;

[0055] Pop-up window dragging module: executes mouse event methods according to mouse actions to drag the pop-up window.

[0056] A method and system for generating a mouse-draggable pop-up window provided by the present invention have the following beneficial effects compared with the prior art: by defining an array variable for storing a pop-up window id and combining it with the v-for loop function of Vue.js, dynamic generation and management of pop-up windows are realized; when a pop-up window needs to be added, only the add button needs to be clicked to automatically trigger the modification of the array variable, without modifying the HTML structure and JavaScript logic, so as to realize dynamic generation of an indefinite number of pop-up windows, making development more flexible and more versatile, and suitable for development needs of various application scenarios; at the same time, by binding a predefined mouse event method to the mouse event of the pop-up window dom, the dragging function of the pop-up window is realized, and the user can move the position of the pop-up window by dragging the mouse, thereby improving the user experience and interactivity; in addition, the method only relies on the Vue.js framework and custom JavaScript logic, and does not need to introduce additional third-party libraries or plug-ins, so it has a smaller size and a higher degree of customization. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] In order to more clearly illustrate the embodiments of the present invention or the technical solutions of the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0058] Figure 1 It is a flowchart of a method for generating a mouse-draggable pop-up window provided by an embodiment of the present invention.

[0059] Figure 2 It is to add a pop-up diagram.

[0060] Figure 3 It is a schematic diagram of adding 4 pop-up windows.

[0061] Figure 4 The present invention provides a schematic block diagram of a system structure for generating a mouse-draggable pop-up window. DETAILED DESCRIPTION

[0062] In order to enable those skilled in the art to better understand the scheme of the present invention, the present invention is further described in detail below in conjunction with the accompanying drawings and specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0063] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art of the present invention. The terms used in the specification of the present invention herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention.

[0064] Some terms related to the present invention are explained below.

[0065] 1. vue: A JavaScript framework for building user interfaces. It is built on standard HTML, CSS, and JavaScript, and provides a declarative, componentized programming model. Vue has a two-way binding feature, in which the data field is used to store global variables. Vue provides the v-on directive for DOM, which is used to bind event listeners to a specific DOM, abbreviated as @. The event listeners involved in this embodiment include @click (mouse click event, i.e., the mouse is pressed and lifted), @mousedown (mouse press event), @mousemove (mouse move event), @mouseout (mouse out of DOM event), etc.

[0066] The entire process of Vue instance from creation to destruction is divided into several stages, which are called Vue life cycle. This embodiment involves the mounted stage, at which time the instance has been mounted to the DOM and data and DOM elements can be obtained.

[0067] 2. JavaScript: hereinafter referred to as js, a lightweight, interpreted or just-in-time compiled programming language with function priority, a prototype programming, multi-paradigm dynamic scripting language, and supports object-oriented, imperative, declarative, and functional programming paradigms.

[0068] 3. Document Object Model: DOM is a standard programming interface for processing extensible markup languages ​​recommended by the W3C organization. It is an application programming interface (API) that is independent of platforms and languages. It can dynamically access programs and scripts to update their content, structure, and style of www documents (HTML and XML documents are defined by the description part). Documents can be further processed, and the results of the processing can be added to the current page. DOM is a tree-based API document that requires the entire document to be represented in memory during the processing process.

[0069] 4. User Interface: referred to as UI for short, refers to the overall design of the software’s human-computer interaction, operating logic, and interface aesthetics. It usually includes graphic design, web design, and mobile interface design.

[0070] 5. Node.js: A JavaScript runtime environment based on the Chrome V8 engine. It uses an event-driven, non-blocking I / O model to allow JavaScript to run on the server-side development platform.

[0071] 6. $event: Vue can access the native event object through the fixed parameter $event, which contains all the information and parameters when the event occurs, making it easy to process and call the event.

[0072] 7. HTML: Hypertext Markup Language is a markup language. It includes a series of tags, through which the document format on the network can be unified, so that scattered Internet resources can be connected into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animations, sounds, tables, links, etc.

[0073] 8. Document: When the browser finishes loading the HTML document, a document object will be created. This object is the Document node in the logical tree and implements the HTML Document interface. This object contains the information of the entire HTML document, and all elements in the HTML page can be accessed and operated through this object.

[0074] Figure 1 1 is a flow chart of a method for generating a mouse-dragable pop-up window provided by an embodiment of the present invention. Figure 1 The execution subject may be a system for generating a mouse draggable pop-up window. The method for generating a mouse draggable pop-up window provided in an embodiment of the present invention is executed by a computer device, and accordingly, the system for generating a mouse draggable pop-up window runs in the computer device. According to different requirements, the order of the steps in the flowchart may be changed, and some may be omitted.

[0075] like Figure 1 As shown, the method includes the following steps.

[0076] S1, define an array variable for storing pop-up window ID.

[0077] The array variable is a global variable. When a new pop-up window is added, the pop-up window id is generated and saved in this global variable. Changes in the array variable trigger the generation of a pop-up window on the page.

[0078] S2, defines an add button dom, and binds the addDiv function to the mouse click event of the add button dom. The addDiv function is used to set a pop-up window id for the newly added pop-up window and add the pop-up window id to the array variable.

[0079] The addDiv function is predefined. When the mouse clicks the add button, the addDiv function is triggered and executed. The addDiv function sets the pop-up window id for the newly added pop-up window and adds the pop-up window id to the array variable.

[0080] S3, define a pop-up window DOM, configure properties for the pop-up window DOM, including binding the v-for loop function of the Vue framework to the array variable, dynamically binding the id of the pop-up window DOM to the element in the array variable, and binding the predefined mouse event method to the mouse event of the pop-up window DOM.

[0081] Pre-configure the properties of the pop-up window DOM. The page generates a pop-up window based on the pop-up window DOM properties. The generated pop-up window can be dragged with the mouse.

[0082] S4, when the add button is clicked, the addDiv function is triggered to generate the pop-up window id of the newly added pop-up window and add the pop-up window id to the array variable. The addition of elements in the array variable triggers the page to render a new pop-up window through the v-for loop function.

[0083] S5, executing a mouse event method according to the mouse action to perform a drag operation on the pop-up window.

[0084] The method of generating a mouse-draggable pop-up window in this embodiment can dynamically generate an indefinite number of pop-up window DOMs that can be dragged by the mouse, making development more flexible and versatile, suitable for development needs of various application scenarios, and indirectly reducing the difficulty of UI design and providing better web page visual effects.

[0085] To further understand the present invention, the present invention is further described in detail below, including a predefined part and a pop-up window processing logic part.

[0086] (1) Predefined part.

[0087] SS1, define an array variable for storing pop-up window ID.

[0088] Customize a global variable, named divArr in this embodiment, to store the array of ids corresponding to the dynamically generated pop-up windows.

[0089] SS2, define a pop-up window variable for recording the pop-up window information of the currently dragged pop-up window.

[0090] A global variable is customized, named chosen in this embodiment, which is used to record the information of the pop-up window currently being dragged, including all pop-up window information such as the pop-up window id, pop-up window position, and pop-up window style.

[0091] SS3, define a mouse position variable to record the current mouse pointer position information.

[0092] A global variable is customized as an object, which is named position in this embodiment and includes two parameters x and y, which are used to record the current mouse pointer position information.

[0093] SS4, define an add button dom.

[0094] To facilitate the description of the implementation process, a button DOM is customized using the HTML native button tag, and a JS method addDiv is customized and bound to the click event @click of this button.

[0095] <button @click="addDiv"> Add to< / button>

[0096] The addDiv method is used to add a new id to the previously defined array variable divArr. For convenience, the id is named in the form of dom + serial number. Here, the js method .length is used to obtain the number of elements in divArr as the serial number.

[0097] this.divArr.push('dom' + this.divArr.length)

[0098] SS5, define a pop-up window dom.

[0099] Customize a DOM to host the pop-up window, which will be referred to as the pop-up window DOM below. Configure properties for the pop-up window DOM, including binding the v-for loop function of the Vue framework to an array variable, dynamically binding the id of the pop-up window DOM to the element in the array variable, and binding the predefined mouse event method to the mouse event of the pop-up window DOM.

[0100] Specifically, for convenience, set the class of dom to domBox. Use the v-for loop function provided by vue to bind the divArr array, and dynamically bind the id to the corresponding element item in the array, so as to realize the dynamic generation of pop-up windows by increasing the number of elements in the divArr array. It should be noted that in order to distinguish different pop-up windows, the id corresponding to each pop-up window, i.e., item, is displayed in the pop-up window.

[0101] In this embodiment, binding the predefined mouse event method to the mouse event of the pop-up window DOM includes: binding the predefined mouse down event method to the mouse down event of the pop-up window DOM; binding the predefined mouse move event method to the mouse move event of the pop-up window DOM; binding the predefined mouse out event method to the mouse out event of the pop-up window DOM; in the mounted life cycle, defining the mouse up method to monitor the global mouse up event.

[0102] Specifically, the custom js methods mouseDown, mouseMove, and mouseOut are respectively bound to the DOM's mouse down event @mousedown, mouse move event @mousemove, and mouse out event @mouseout, and the parameter $event is used to obtain event information.

[0103] <div class="domBox"

[0104] :id="item"

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

[0106] :key="index"

[0107] @mousedown="mouseDown(item, $event)"

[0108] @mousemove="mouseMove($event)"

[0109] @mouseout="mouseOut(item)">{{item}}

[0110] In the mounted life cycle, the custom js method mouseUp is used to monitor the global mouse up event.

[0111] window.onmouseup = this.mouseUp

[0112] This embodiment pre-sets all pop-up window DOM styles, including the pop-up window position as absolute positioning and absolute positioning initial position.

[0113] Specifically,

[0114] In the css part, set the dom style of all pop-up windows through the class selector .domBox. Set position to absolute. For the sake of display, set dom to a gray square with a width and height of 100px, and set the absolute initial position through top and left.

[0115] .domBox {

[0116] position: absolute;

[0117] top: 200px;

[0118] left: 200px;

[0119] background-color: gray;

[0120] width: 100px;

[0121] height: 100px;

[0122] text-align: center;

[0123] line-height: 100px;

[0124] font-size: 30px;

[0125] user-select: none; / / For aesthetic reasons, the text content in the DOM (corresponding to the pop-up window ID) cannot be selected

[0126] }

[0127] (2) Pop-up window processing logic part.

[0128] SS6, when the add button is clicked, the addDiv function is triggered to generate the pop-up window id of the newly added pop-up window and add the pop-up window id to the array variable. The addition of elements in the array variable triggers the page to render a new pop-up window through the v-for loop function.

[0129] After clicking the Add button, as the elements in the global variable array divArr increase, the page will automatically render a pop-up window DOM through v-for. Specifically, a new pop-up window is rendered according to the set pop-up window DOM style, and the pop-up window id is displayed in the pop-up window. Figure 2 is to add a pop-up window diagram, Figure 3 It is a schematic diagram of adding 4 pop-up windows.

[0130] SS7, executes the mouse event method according to the mouse action to drag the pop-up window.

[0131] SS7.1, when the mouse moves to the target pop-up window and is pressed, the mouse down event method is triggered.

[0132] SS7.1.1, move the mouse to the target pop-up window and press it, trigger the mouse down event listener, and get the target pop-up window ID and $event parameter.

[0133] SS7.1.2, call and execute the getElementById method of the document object to obtain the target pop-up window object through the target pop-up window ID, and assign the target pop-up window object to the pop-up window variable.

[0134] SS7.1.3, get the current mouse coordinate value through the $event parameter and assign the current mouse coordinate value to the mouse position variable.

[0135] SS7.1.4, if the mouse is lifted, the mouseup method is triggered to set the popup variable to zero.

[0136] Move the mouse to the target pop-up window DOM and press it. This will trigger the @mousedown event listener, get the two parameters item (that is, the id of the current DOM, named id in the method) and $event (that is, the current event object, named e in the method), and execute the custom js method mouseDown.

[0137] In this method, the getElementById method provided by the document object is called to obtain the corresponding pop-up window DOM object through the ID of the current pop-up window DOM, and assign this object to the global variable chosen.

[0138] this.chosen = document.getElementById(id)

[0139] At the same time, the current mouse coordinate value is obtained through the current event object e (that is, the event object obtained by $event) and assigned to the two parameters in the global variable position.

[0140] this.position.x = e.clientX

[0141] this.position.y = e.clientY

[0142] When the mouse is lifted, the custom method mouseUp bound to the onmouseup event listener in the mounted life cycle is triggered.

[0143] In this method, choose is set to null to indicate that the dom is not currently selected.

[0144] this.chosen = null

[0145] SS7.2, triggers the mouse move event method when the mouse drags the target pop-up window.

[0146] SS7.2.1, trigger the mouse move event listener when the mouse moves, by obtaining the $event parameter.

[0147] SS7.2.2, determine whether the pop-up variable is empty.

[0148] SS7.2.3, if empty, terminate the mouse move event method.

[0149] SS7.2.4, if it is not empty, obtain the coordinate value of the current target pop-up window from the pop-up window variable, and obtain the current mouse coordinate value through the $event parameter.

[0150] SS7.2.5, get the coordinate value of the mouse before it moves from the mouse position variable.

[0151] SS7.2.6, calculate the coordinates of the target pop-up window after the mouse moves using the following formula:

[0152] The coordinate value of the target pop-up window after the mouse moves = the coordinate value of the current target pop-up window + the current mouse coordinate value - the coordinate value before the mouse moves.

[0153] SS7.2.7, after the calculation is completed, update the mouse pointer position in the mouse position variable to the latest mouse coordinate value.

[0154] SS7.2.8, using the template string format, updates the absolute position of the pop-up window in the pop-up window DOM style to the coordinate value of the target pop-up window after the calculated mouse movement is completed.

[0155] The mouse drags the pop-up window DOM. At the event level, it can be interpreted as the mouse is pressed inside the pop-up window DOM and then moves without triggering the lift event. When the mouse moves, the @mousemove listener is triggered, and the custom js method mouseMove is executed. At the same time, the event object is obtained as a parameter through $event, which is named e in the method.

[0156] At the beginning of the method execution, it is necessary to determine whether the mouse is in the pressed state and not lifted. Since the global variable chosen will be set to empty when the mouseUp method is triggered after lifting, a null value of chosen means that the mouse is not in the pressed state.

[0157] if (this.chosen === null) {

[0158] return / / Since it is not selected, the method ends immediately

[0159] }

[0160] If chosen is not empty, it means chosen is the DOM object of the currently selected DOM. The x and y axis positions of the current DOM can be obtained through the offsetLeft and offsetTop parameters in chosen.

[0161] At the same time, the current x and y axis positions of the mouse can be obtained through the clientX and clientY parameters in the event object e.

[0162] Finally, get the x and y axis positions of the mouse before moving through the x and y parameters in the global variable position.

[0163] Current DOM position + current mouse position - position before mouse movement. This formula can be used to calculate the x and y axis positioning of the DOM after the mouse movement. Define two local variables left and top to store the two changes.

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

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

[0166] After the calculation, the mouse position in the global variable position needs to be updated.

[0167] this.position.x = e.clientX

[0168] this.position.y = e.clientY

[0169] In this embodiment, since the CSS setting sets the DOM to absolute positioning, the absolute position of the pop-up window DOM can be changed by modifying the left and top parameters in the style parameter in chosen. The template string format is used here to modify these two parameters to the two local variables just calculated.

[0170] this.chosen.style.left = `${left}px`

[0171] this.chosen.style.top = `${top}px`

[0172] At this point, after the mouse is lifted, a complete dragging behavior is completed.

[0173] SS7.3, the mouse-out event method is triggered when the mouse drags the target pop-up window and leaves it.

[0174] SS7.3.1, trigger the mouse out event listener when the mouse drags the target pop-up window and leaves it.

[0175] SS7.3.2, determine whether the pop-up variable is empty.

[0176] SS7.3.3, if empty, terminate the mouse out event method.

[0177] SS7.3.4, if it is not empty, determine whether the pop-up window being left is the currently selected pop-up window based on the pop-up window id in the pop-up window variable.

[0178] SS7.3.5, if yes, set the popup variable to null.

[0179] Due to the difference between the page rendering speed and the mouse movement speed, the mouse may move too fast and leave the DOM. In this case, the @mouseout event listener will be triggered and the mouseOut method used to handle this situation will be executed.

[0180] if (this.chosen === null) { / / If the DOM is not selected yet

[0181] return / / Exit method immediately

[0182] }

[0183] if (this.chosen.id === id) { / / If the DOM left is the currently selected DOM

[0184] this.chosen = null / / then empty the selected DOM

[0185] }

[0186] An embodiment of a method for generating a mouse-draggable pop-up window is described in detail above. Based on the method for generating a mouse-draggable pop-up window described in the above embodiment, an embodiment of the present invention also provides a system for generating a mouse-draggable pop-up window corresponding to the method.

[0187] Figure 4 1 is a schematic block diagram of a system structure for generating a mouse draggable pop-up window provided by an embodiment of the present invention. The system for generating a mouse draggable pop-up window can be divided into multiple functional modules according to the functions performed by the system, such as Figure 4 As shown. The functional modules may include: variable definition module, add button DOM definition module, pop-up window DOM definition module, pop-up window generation module, pop-up window drag module. The module referred to in the present invention refers to a series of computer program segments that can be executed by at least one processor and can complete fixed functions, which are stored in a memory.

[0188] Variable definition module: define an array variable for storing pop-up window ID.

[0189] Add button dom definition module: define an add button dom, and bind the addDiv function to the mouse click event of the add button dom. The addDiv function is used to set the pop-up window id for the new pop-up window and add the pop-up window id to the array variable.

[0190] Pop-up window DOM definition module: define a pop-up window DOM and configure properties for the pop-up window DOM, including binding the v-for loop function of the Vue framework to an array variable, dynamically binding the id of the pop-up window DOM to the element in the array variable, and binding the predefined mouse event method to the mouse event of the pop-up window DOM.

[0191] Pop-up window generation module: When the add button is clicked, the addDiv function is triggered to generate the pop-up window id of the newly added pop-up window and add the pop-up window id to the array variable. The addition of elements in the array variable triggers the page to render a new pop-up window through the v-for loop function.

[0192] Pop-up window dragging module: executes mouse event methods according to mouse actions to drag the pop-up window.

[0193] In an optional implementation, the variable definition module is further used to define a pop-up window variable for recording the pop-up window information of the currently dragged pop-up window; and define a mouse position variable for recording the current mouse pointer position information.

[0194] The system for generating a mouse-draggable pop-up window in the present embodiment is used to implement the aforementioned method for generating a mouse-draggable pop-up window. Therefore, the specific implementation method of the system can be seen in the embodiment part of the method for generating a mouse-draggable pop-up window in the previous text. Therefore, its specific implementation method can refer to the description of the corresponding embodiments of each part, which will not be elaborated here.

[0195] In addition, since the system for generating a mouse-draggable pop-up window in this embodiment is used to implement the aforementioned method for generating a mouse-draggable pop-up window, its function corresponds to that of the aforementioned method and will not be described in detail here.

[0196] The above disclosure is only a preferred embodiment of the present invention, but the present invention is not limited thereto. Any non-creative changes that can be thought of by a person skilled in the art, as well as several improvements and modifications made without departing from the principle of the present invention, should fall within the protection scope of the present invention.

Claims

1. A method for generating a mouse draggable pop-up window, characterized in that: The following steps are involved: Define an array variable for storing pop-up window IDs; Define an add button dom, and bind the addDiv function to the mouse click event of the add button dom. The addDiv function is used to set a pop-up window id for the newly added pop-up window and add the pop-up window id to the array variable; The array variable is a global variable. When a new pop-up window is added, the pop-up window id is generated and saved in this global variable. Changes in the array variable trigger the generation of a pop-up window on the page. Define a pop-up window DOM and configure properties for the pop-up window DOM, including binding the v-for loop function of the Vue framework to an array variable, dynamically binding the id of the pop-up window DOM to the element in the array variable, and binding the predefined mouse event method to the mouse event of the pop-up window DOM; pre-configure the properties of the pop-up window DOM, and the page generates a pop-up window according to the properties of the pop-up window DOM. The generated pop-up window can be dragged with the mouse; When the Add button is clicked, the addDiv function is executed to generate the pop-up window ID of the newly added pop-up window and add the pop-up window ID to the array variable. The addition of elements in the array variable triggers the page to render a new pop-up window through the v-for loop function; Execute the mouse event method according to the mouse action to drag the pop-up window; The addDiv function sets the popup window id for the newly added popup window, including: Use the .length property to get the number of elements in an array variable; Taking said quantity as a sequence number; Set the pop-up window ID to the format of dom+serial number; Execute mouse event methods according to mouse actions to drag the pop-up window, including triggering the mouse drop event method when the mouse moves to the target pop-up window and presses it, including: Move the mouse to the target pop-up window and press it, triggering the mouse down event listener to obtain the target pop-up window ID and $event parameter; Call and execute the getElementById method of the document object to obtain the target pop-up window object through the target pop-up window ID, and assign the target pop-up window object to the pop-up window variable; Get the current mouse coordinate value through the $event parameter and assign the current mouse coordinate value to the mouse position variable; If the mouse is lifted, the mouse lifted method is triggered to set the pop-up window variable to zero; Execute mouse event methods according to mouse actions to drag the pop-up window, including triggering mouse movement event methods when the mouse drags the target pop-up window, specifically including: When the mouse moves, the mouse movement event listener is triggered by obtaining the $event parameter; Determine whether the pop-up window variable is empty; If it is empty, the mouse movement event method ends; If it is not empty, get the coordinate value of the current target pop-up window from the pop-up window variable, and get the current mouse coordinate value through the $event parameter; Get the coordinate value of the mouse before moving from the mouse position variable; The coordinate value of the target pop-up window after the mouse moves is calculated using the following formula: The coordinate value of the target pop-up window after the mouse moves = the coordinate value of the current target pop-up window + the current mouse coordinate value - the coordinate value before the mouse moves; After the calculation is completed, the mouse pointer position in the mouse position variable is updated to the latest mouse coordinate value; Using the template string format, the absolute position of the pop-up window in the pop-up window DOM style is updated to the coordinate value of the target pop-up window after the calculated mouse movement is completed.

2. The method for generating a mouse draggable pop-up window according to claim 1, characterized in that: Before clicking the Add button, the following steps are also included: Set the DOM style of all pop-up windows, including the absolute positioning of the pop-up window and the absolute positioning initial position.

3. The method for generating a mouse draggable pop-up window according to claim 2, characterized in that: The page renders a new pop-up window through the v-for loop function, including: Render a new pop-up window according to the set pop-up window DOM style; Display the popup id in the popup.

4. The method for generating a mouse-draggable pop-up window according to any one of claims 1 to 3, characterized in that: Bind the predefined mouse event method to the mouse event of the pop-up window DOM, including: Bind the predefined mouse down event method to the mouse down event of the pop-up window DOM; Bind the predefined mouse movement event method to the mouse movement event of the pop-up window DOM; Bind the predefined mouse out event method to the mouse out event of the pop-up window DOM; In the mounted life cycle, define the mouse up method to monitor the global mouse up event.

5. The method for generating a mouse-draggable pop-up window according to claim 4, characterized in that: Before clicking the Add button, the following steps are also included: Define a pop-up window variable to record the pop-up window information of the currently dragged pop-up window; Define a mouse position variable to record the current mouse pointer position information.

6. The method for generating a mouse-draggable pop-up window according to claim 5, characterized in that: Execute mouse event methods according to mouse actions to drag the pop-up window, including triggering the mouse exit event method when the mouse drags the target pop-up window and leaves it, including: When the mouse drags the target pop-up window and leaves it, the mouse exit event listener is triggered; Determine whether the pop-up window variable is empty; If it is empty, the mouse out event method ends; If it is not empty, determine whether the pop-up window being left is the currently selected pop-up window based on the pop-up window id in the pop-up window variable; If so, set the popup variable to empty.

7. A system for generating a mouse-draggable pop-up window, characterized in that: include, Variable definition module: define an array variable for storing pop-up window ID; Add button DOM definition module: define an add button DOM, and bind the addDiv function to the mouse click event of the add button DOM. The addDiv function is used to set the pop-up window ID for the new pop-up window and add the pop-up window ID to the array variable; The array variable is a global variable. When a new pop-up window is added, the pop-up window id is generated and saved in this global variable. Changes in the array variable trigger the generation of a pop-up window on the page. Pop-up window DOM definition module: define a pop-up window DOM and configure properties for the pop-up window DOM, including binding the v-for loop function of the Vue framework to an array variable, dynamically binding the id of the pop-up window DOM to the element in the array variable, and binding the predefined mouse event method to the mouse event of the pop-up window DOM; pre-configure the properties of the pop-up window DOM, and the page generates a pop-up window according to the pop-up window DOM properties. The generated pop-up window can be dragged with the mouse; Pop-up window generation module: When the add button is clicked, the addDiv function is triggered to generate the pop-up window ID of the newly added pop-up window and add the pop-up window ID to the array variable. The addition of elements in the array variable triggers the page to render a new pop-up window through the v-for loop function; Pop-up window dragging module: executes mouse event methods according to mouse actions to drag the pop-up window; The addDiv function is used to set a popup window id for a new popup window, including: Use the .length property to get the number of elements in an array variable; Taking said quantity as a sequence number; Set the pop-up window ID to the format of dom+serial number; Execute mouse event methods according to mouse actions to drag the pop-up window, including triggering the mouse drop event method when the mouse moves to the target pop-up window and presses it, including: Move the mouse to the target pop-up window and press it, triggering the mouse down event listener to obtain the target pop-up window id and $event parameter; Call and execute the getElementById method of the document object to obtain the target pop-up window object through the target pop-up window ID, and assign the target pop-up window object to the pop-up window variable; Get the current mouse coordinate value through the $event parameter and assign the current mouse coordinate value to the mouse position variable; If the mouse is lifted, the mouse lifted method is triggered to set the pop-up window variable to zero; Execute mouse event methods according to mouse actions to drag the pop-up window, including triggering mouse movement event methods when the mouse drags the target pop-up window, specifically including: When the mouse moves, the mouse movement event listener is triggered by obtaining the $event parameter; Determine whether the pop-up window variable is empty; If it is empty, the mouse movement event method ends; If it is not empty, get the coordinate value of the current target pop-up window from the pop-up window variable, and get the current mouse coordinate value through the $event parameter; Get the coordinate value of the mouse before moving from the mouse position variable; The coordinate value of the target pop-up window after the mouse moves is calculated using the following formula: The coordinate value of the target pop-up window after the mouse moves = the coordinate value of the current target pop-up window + the current mouse coordinate value - the coordinate value before the mouse moves; After the calculation is completed, the mouse pointer position in the mouse position variable is updated to the latest mouse coordinate value; Using the template string format, the absolute position of the pop-up window in the pop-up window DOM style is updated to the coordinate value of the target pop-up window after the calculated mouse movement is completed.

Images