Pop-up window dragging method, system, electronic device and storage medium

Abstract

The present application discloses a pop-up window dragging method, system, electronic device and storage medium, which are applied in the field of information technology. After detecting the drag start event, the system determines whether to continue to complete the drag by judging whether the drag start position belongs to the preset pop-up window area that can trigger the drag. In this way, not only can the trigger area of ​​the pop-up window drag be flexibly defined, but also the pop-up window dragging operation can be prevented from conflicting with some complex interactive elements, effectively improving the user experience of the pop-up window dragging function.

Description

Technical Field

[0001] The present application relates to the field of information technology, and in particular to a pop-up window dragging method, system, electronic device and storage medium. Background Art

[0002] In the map business, there is often a type of demand: when a user clicks a point or a line on the map, he or she requires that the business information corresponding to the point (such as a store) or the line (such as a pipeline) be displayed (for example, the store's address, business hours, contact information, or the pipeline's flow and load rate).

[0003] Leaflet (an open source interactive map JavaScript library) provides pop-up components (such as popups and tooltips) for displaying business information, but Leaflet's pop-ups do not support complex interactive elements such as built-in forms and charts.

[0004] Vue (progressive JavaScript framework) provides draggable pop-ups, and Vue's pop-ups support complex interactive elements such as built-in forms and charts. However, Vue's draggable pop-ups only support being dragged in a fixed area (such as the top of the pop-up window), and the trigger area for dragging the pop-up window is too fixed and rigid, and not flexible enough. Summary of the invention

[0005] In order to solve the problem in the prior art that pop-up windows do not support built-in complex interactive elements and the triggering area of ​​pop-up window dragging is not flexible enough, the embodiments of the present application provide a pop-up window dragging method, system, electronic device and storage medium.

[0006] In the first aspect, the embodiment of the present application provides a pop-up window dragging method. The method includes: monitoring a drag start event, a drag event, and a drag end event; in response to monitoring a drag start event, obtaining a drag start position, and determining whether the drag start position belongs to a preset pop-up window area that can trigger drag; if so, executing a subsequent response; otherwise, refusing to execute a subsequent response; in response to monitoring a drag event, obtaining a drag target position, and moving the pop-up window based on the drag start position and the drag target position; in response to monitoring a drag end event, stopping moving the pop-up window.

[0007] In some embodiments, determining whether the drag start position belongs to a preset pop-up window area that can trigger drag includes: obtaining the area range of multiple elements in the pop-up window; determining the target element to which the drag start position belongs based on the area range of the multiple elements, the target element being one of the multiple elements; determining whether the target element belongs to a preset element that can trigger drag, so as to determine whether the drag start position belongs to the preset pop-up window area that can trigger drag.

[0008] In some embodiments, moving the pop-up window based on the drag start position and the drag target position includes: determining a to-be-determined moving distance based on the drag start position and the drag target position; obtaining the size of the pop-up window, the size of the visible area of ​​the display device, and the distance from the pop-up window to the visible area; based on the to-be-determined moving distance, the size of the pop-up window, the size of the visible area, and the distance from the pop-up window to the visible area, determining whether the pop-up window at least partially exceeds the visible area after moving the pop-up window with the to-be-determined moving distance; if so, moving the pop-up window with part of the to-be-determined moving distance until the boundary of the pop-up window coincides with the boundary of the visible area; otherwise, moving the pop-up window with the to-be-determined moving distance.

[0009] In some embodiments, the method further comprises: in response to monitoring the drag end event, executing a service-related callback function. In some embodiments, the callback function is used to record the current position of the pop-up window as the display position of the pop-up window when it is opened next time.

[0010] In some embodiments, the drag start event is a mouse press event, the drag event is a mouse move event, and the drag end event is a mouse release event.

[0011] In the second aspect, an embodiment of the present application provides a pop-up window dragging system. The system includes a monitoring module and a response module. The monitoring module is used to monitor drag start events, drag events and drag end events. The response module is used to: in response to the monitoring module detecting a drag start event, obtain the drag start position, and determine whether the drag start position belongs to a preset pop-up window area that can trigger drag; in response to determining that the drag start position belongs to a preset pop-up window area that can trigger drag, control the monitoring module to monitor the drag event; in response to the monitoring module detecting a drag event, obtain the drag target position, and move the pop-up window based on the drag start position and the drag target position, and control the monitoring module to monitor the drag end event; in response to the monitoring module detecting a drag end event, stop moving the pop-up window.

[0012] In some embodiments, the response module is further used to: in response to detecting a drag end event, execute a service-related callback function, wherein the callback function is used to record the current position of the pop-up window as the display position of the pop-up window when it is opened next time.

[0013] In a third aspect, an embodiment of the present application provides an electronic device, comprising a processor and a memory, wherein the memory stores a program code, and when the program code is executed by the processor, the processor executes the pop-up window dragging method as described in the first aspect.

[0014] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which includes a program code. When the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute the pop-up window dragging method as described in the first aspect.

[0015] In a fifth aspect, an embodiment of the present application provides a computer program product, which includes computer instructions, and the computer instructions are stored in a computer-readable storage medium; when a processor of an electronic device obtains the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, so that the electronic device executes the pop-up dragging method described in the first aspect.

[0016] In the embodiment of the present application, after detecting the start event of a drag, the system determines whether to continue to complete the drag by determining whether the start position of the drag belongs to the preset pop-up window area that can trigger the drag. In this way, not only can the trigger area of ​​the pop-up window drag be flexibly defined, but also conflicts between the pop-up window drag operation and some complex interactive elements can be avoided, effectively improving the user experience of the pop-up window drag function.

[0017] Other features and advantages of the present application will be described in the following description, and partly become apparent from the description, or understood by practicing the present application. The purpose and other advantages of the present application can be realized and obtained by the structures specifically pointed out in the written description, claims, and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the related technologies, the drawings required for use in the embodiments or the related technical descriptions are briefly introduced below. Obviously, the drawings described below are only the embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0019] Figure 1 It is an exemplary flowchart of the pop-up window dragging method provided in an embodiment of the present application.

[0020] Figure 2 It is an exemplary flowchart of the process of determining whether the drag start position belongs to a preset pop-up window area that can trigger dragging, provided in an embodiment of the present application.

[0021] Figure 3 It is an exemplary flowchart of the process of moving a pop-up window based on a drag start position and a drag target position provided in an embodiment of the present application.

[0022] Figure 4 An exemplary block diagram of a pop-up window dragging system provided in an embodiment of the present application.

[0023] Figure 5An exemplary block diagram of an electronic device provided in accordance with an embodiment of the present application. DETAILED DESCRIPTION

[0024] In order to make the purpose, technical scheme and advantages of the present application clearer, the technical scheme in the embodiment of the present application will be clearly and completely described below in conjunction with the drawings in the embodiment of the present application. Obviously, the described embodiment is only a part of the embodiment of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application. In the absence of conflict, the embodiments in the present application and the features in the embodiments can be arbitrarily combined with each other. In addition, although the logical order is shown in the flow chart, in some cases, the steps shown or described can be performed in an order different from that here.

[0025] The terms "first", "second", etc. in the specification and claims of this application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the terms used in this way can be interchanged where appropriate, so that the embodiments of the invention described herein can be implemented in sequences other than those illustrated or described herein.

[0026] Figure 1 1 is an exemplary flow chart of the pop-up window dragging method provided in an embodiment of the present application. Process 100 is executed by a processor. Figure 1 As shown, process 100 includes the following steps.

[0027] Step 110, monitoring the drag start event, the drag event and the drag end event.

[0028] For the sake of brevity, this application mainly uses mouse (mouse press event, mouse move event and mouse release event) events as an example for explanation. It should be understood that events related to pop-up window dragging can also use events of other operation modes, such as touch mode (through fingers, stylus, etc.) events.

[0029] Monitoring refers to continuous detection. For example, the system can periodically detect drag start events, drag events, and drag end events. Once a specific event is detected, the response bound to the event is executed.

[0030] Step 120 , in response to detecting a drag start event, obtaining a drag start position.

[0031] Taking the drag start event as a mouse press event as an example, in response to detecting a mouse press event (for example, the user presses the left mouse button), the system can obtain the current position of the mouse (for example, an X-axis coordinate and a Y-axis coordinate) as the drag start position.

[0032] Step 130 , determining whether the drag start position belongs to a preset pop-up window area that can trigger drag.

[0033] If yes, the system executes the subsequent response, that is, continues to execute steps 140 to 160 or steps 140 to 170. Otherwise, the system refuses to execute the subsequent response.

[0034] Exemplarily, the system may pre-save the position range (such as coordinate range) of the pop-up window area that can trigger dragging, so as to determine whether the dragging start position (such as coordinates) belongs to the pop-up window area that can trigger dragging.

[0035] In some embodiments, the system can determine the type of pop-up window area by determining the type of element to which the drag start position belongs. For more details, please refer to Figure 2 and its related description.

[0036] In the case of complex interactive elements built into the pop-up window, pop-up drag-related events are prone to conflict with interactive events of such elements, resulting in a poor user experience or even failure of the expected function to take effect. In view of this, the present application classifies the pop-up window area and introduces the judgment of the pop-up window area type in the pop-up window drag process. In this way, the drag function can be triggered in any pop-up window area except complex interactive elements (that is, the triggering area is more flexible), and pop-up drag-related events will not conflict with other interactive events, effectively improving the user experience.

[0037] Equivalently, the system can also determine whether the drag start position belongs to a preset pop-up window area that cannot trigger drag. As an example only, the pop-up window area that cannot trigger drag can include one or more interactive elements in forms, maps, charts, etc. Such interactive elements use the same or similar interactive methods as pop-up window dragging. For example, the user also needs to use the mouse to click and move when editing a form or chart.

[0038] Step 140 , in response to detecting the drag event, obtaining the drag target position.

[0039] Taking the drag event as a mouse movement event as an example, in response to detecting the mouse movement event, the system can obtain the current position of the mouse (eg, X-axis coordinate and Y-axis coordinate) as the drag target position.

[0040] Step 150: Move the pop-up window based on the drag start position and the drag target position.

[0041] In some embodiments, the system can calculate the moving distance (e.g., the first distance in the X direction and the second distance in the Y direction) based on the drag start position and the drag target position, and obtain the initial position of the pop-up window. Furthermore, the system can calculate the target position of the pop-up window based on the initial position of the pop-up window and the calculated moving distance, so as to move the pop-up window to the target position.

[0042] In some embodiments, the moving distance of the pop-up window can be limited to prevent the pop-up window from being moved outside the visible area of ​​the display device (such as a monitor). For the specific implementation of limiting the moving distance of the pop-up window, please refer to Figure 3 and its related description.

[0043] Step 160, in response to detecting the drag end event, stop moving the pop-up window.

[0044] Exemplarily, in response to detecting that the user releases the mouse (eg, releases the left button), the system may stop moving the pop-up window.

[0045] In some embodiments, process 100 further includes step 170 .

[0046] Step 170: In response to detecting the drag end event, executing a service-related callback function.

[0047] The callback function is a function that is passed as a parameter, for example, as a parameter of an event. You can define the callback function of the drag end event according to business needs to implement the business functions required after the pop-up window is dragged, for example, displaying the province where the current location of the pop-up window is located.

[0048] In some embodiments, the callback function is used to record the current position of the pop-up window as the display position when the pop-up window is opened next time. For example, when the user opened the pop-up window last time, the pop-up window was finally dragged to position P, then the next time the user opens the pop-up window, the system will automatically display the pop-up window at position P.

[0049] It is worth noting that in some embodiments, process 100 can be implemented based on Leaflet and Vue to solve the problem that the pop-up window in the map service does not support built-in complex interactive elements and the trigger area of ​​the pop-up window drag is not flexible enough. In other embodiments, process 100 can be implemented in other ways or applied to other services (for example, game services) to solve the same technical problems.

[0050] Figure 2 is an exemplary flow chart of the process of determining whether the drag start position belongs to the preset pop-up window area that can trigger dragging provided by an embodiment of the present application. Figure 2 As shown, step 130 includes the following sub-steps.

[0051] Step 210, obtaining the area range of multiple elements in the pop-up window.

[0052] Elements inside the pop-up window include but are not limited to the pop-up window top, text box, form, map, icon, and pop-up window bottom.

[0053] Step 220: Determine the target element to which the drag start position belongs according to the area range of the multiple elements.

[0054] The target element is one of the multiple elements. The system can determine the area range where the drag start position falls from the area ranges of the multiple elements, thereby determining the target element to which the drag start position belongs.

[0055] Step 230 , determining whether the target element is a preset element that can trigger dragging, so as to determine whether the dragging start position belongs to a preset pop-up window area that can trigger dragging.

[0056] Referring to the above content, equivalently, the system can determine whether the target element belongs to a preset element that cannot be dragged. Generally, the element that cannot be dragged is an interactive element, especially a complex interactive element (e.g., a form, map, chart) whose operation method is easy to conflict with the operation method of pop-up drag (such as click operation).

[0057] If it is determined that the target element belongs to the preset element that can trigger dragging, the system can determine that the dragging start position belongs to the preset pop-up window area that can trigger dragging. Conversely, the system can determine that the dragging start position does not belong to the preset pop-up window area that can trigger dragging (that is, it belongs to the pop-up window area where dragging cannot be triggered). For example, in the case where the non-interactive elements are pre-set to include only forms, maps, and charts (or, the interactive elements are any elements that exclude these elements), if the target element is any one of forms, maps, and charts, the system determines that the target element belongs to the preset element that cannot trigger dragging (that is, it does not belong to the preset element that can trigger dragging). Otherwise, the system determines that the target element does not belong to the preset element that cannot trigger dragging (that is, it belongs to the preset element that can trigger dragging).

[0058] Figure 3 FIG. 1 is an exemplary flow chart of a process of moving a pop-up window based on a drag start position and a drag target position provided by an embodiment of the present application. Figure 2 As shown, step 150 includes the following sub-steps.

[0059] Step 310: determine the pending moving distance based on the drag start position and the drag target position.

[0060] Exemplarily, the to-be-determined moving distance may include a first distance in a horizontal direction (which may be recorded as an X direction) and a second distance in a vertical direction (which may be recorded as a Y direction).

[0061] Step 320, obtaining the size of the pop-up window, the size of the visible area of ​​the display device, and the distance from the pop-up window to the visible area.

[0062] Similarly, the distance from the pop-up window to the visible area may include a first distance in the horizontal direction (which may be recorded as the X direction) and a second distance in the vertical direction (which may be recorded as the Y direction).

[0063] Step 330, based on the to-be-determined moving distance, the size of the pop-up window, the size of the visible area, and the distance from the pop-up window to the visible area, determine whether the pop-up window at least partially exceeds the visible area after moving the pop-up window by the to-be-determined moving distance.

[0064] Taking the XY coordinate system as an example, let's take the upper boundary of the visible area (usually a rectangle) as the X axis and its left boundary as the Y axis. The system can determine the maximum X coordinate of different points in the visible area (denoted as x) according to the size (width and height) of the visible area. max ) and the maximum Y coordinate (denoted as y max ), thereby determining the visible area range (0~x max and 0~y max ). The system can also determine the pending target position of the pop-up window after moving the pop-up window with the pending moving distance (i.e., x1=x0+Δx and y1=y0+Δy) based on the distance from the pop-up window to the visible area (denoted as x0 and y0) and the pending moving distance (denoted as Δx and Δy). Furthermore, the system can determine the pending boundary range of the pop-up window based on the pending target position and size (width and height) of the pop-up window (generally also a rectangle). After obtaining the pending boundary range and visible area range of the pop-up window, the system can determine whether the pop-up window at least partially exceeds the visible area after moving the pop-up window with the pending moving distance.

[0065] If yes, the system executes step 340. Otherwise, the system executes step 350.

[0066] Step 340: Move the pop-up window by a portion of the to-be-determined moving distance until the boundary of the pop-up window is aligned with the boundary of the visible area.

[0067] The system can calculate the maximum ratio of the target moving distance to the pending moving distance that makes the pop-up window completely within the visible area, and move the pop-up window by the product of the pending moving distance and the maximum ratio. Taking the XY coordinate system as an example, assuming that the maximum ratio is k (0<k<1), and the pending moving distances are Δx and Δy, then the target moving distances are k*Δx and k*Δy.

[0068] Step 350: Move the pop-up window by a distance to be determined.

[0069] Figure 4 is an exemplary block diagram of the pop-up window dragging system provided in the embodiment of the present application. Figure 4As shown, system 400 includes a monitoring module 410 and a response module 420 .

[0070] The monitoring module 410 is used to monitor a drag start event, a drag event, and a drag end event.

[0071] The response module 420 is used to: in response to the monitoring module detecting a drag start event, obtain the drag start position, and determine whether the drag start position belongs to a preset pop-up window area that can trigger dragging; if so, execute subsequent responses; otherwise, refuse to execute subsequent responses; in response to the monitoring module detecting a drag event, obtain the drag target position, and move the pop-up window based on the drag start position and the drag target position; in response to the monitoring module detecting a drag end event, stop moving the pop-up window.

[0072] In some embodiments, the response module is further used to: execute a service-related callback function in response to detecting a drag end event.

[0073] For more details about the system 400 and its modules, please refer to Figure 1 For example, the system 400 can be implemented as a part of a map application based on Leaflet and Vue.

[0074] refer to Figure 5 The embodiment of the present application further provides an electronic device 500, which includes a processor 510 and a memory 520. The memory stores a program code, and when the program code is executed by the processor 510, the processor 510 executes the pop-up window dragging method provided in the embodiment of the present application.

[0075] An embodiment of the present application also provides a computer-readable storage medium, which includes a program code. When the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute the pop-up window dragging method provided by the embodiment of the present application.

[0076] The embodiment of the present application also provides a computer program product, which includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. When a processor of an electronic device obtains the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, so that the electronic device executes the pop-up window dragging method provided in the embodiment of the present application.

[0077] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A pop-up window dragging method, characterized in that: include: Monitor drag start events, drag events, and drag end events; In response to detecting a drag start event, obtaining a drag start position, and determining whether the drag start position belongs to a preset pop-up window area that can trigger drag; If yes, execute the subsequent response; otherwise, refuse to execute the subsequent response; In response to detecting a drag event, obtaining a drag target position, and moving the pop-up window based on the drag start position and the drag target position; In response to detecting the drag end event, stopping moving the pop-up window.

2. The method according to claim 1, characterized in that: The determining whether the drag start position belongs to a preset pop-up window area that can trigger dragging includes: Get the area range of multiple elements in the pop-up window; Determine, according to the area ranges of the multiple elements, a target element to which the drag start position belongs, the target element being one of the multiple elements; Determine whether the target element belongs to a preset element that can trigger dragging, so as to determine whether the dragging start position belongs to a preset pop-up window area that can trigger dragging.

3. The method according to claim 1, characterized in that: The moving the pop-up window based on the drag start position and the drag target position includes: Determining a pending moving distance based on the drag start position and the drag target position; Obtain the size of the pop-up window, the size of the visible area of ​​the display device, and the distance from the pop-up window to the visible area; Based on the pending moving distance, the size of the pop-up window, the size of the visible area, and the distance from the pop-up window to the visible area, determining whether the pop-up window at least partially exceeds the visible area after the pop-up window is moved by the pending moving distance; If so, the pop-up window is moved by part of the to-be-determined moving distance until the boundary of the pop-up window is aligned with the boundary of the visible area; otherwise, the pop-up window is moved by the to-be-determined moving distance.

4. The method according to claim 1, characterized in that: The method further comprises: In response to detecting the drag end event, a service-related callback function is executed, and the callback function is used to record the current position of the pop-up window as the display position of the pop-up window when it is opened next time.

5. The method according to claim 1, characterized in that: The drag start event is a mouse press event, the drag event is a mouse move event, and the drag end event is a mouse release event.

6. A pop-up window dragging system, characterized in that: include: Monitoring module, used to monitor the drag start event, drag event and drag end event; A response module is used to: in response to the monitoring module detecting a drag start event, obtain the drag start position, and determine whether the drag start position belongs to a preset pop-up window area that can trigger drag; if so, execute subsequent responses; otherwise, refuse to execute subsequent responses; in response to the monitoring module detecting a drag event, obtain the drag target position, and move the pop-up window based on the drag start position and the drag target position; in response to the monitoring module detecting a drag end event, stop moving the pop-up window.

7. In the system as described in claim 6, the response module is also used to: in response to monitoring the drag end event, execute a business-related callback function, and the callback function is used to record the current position of the pop-up window as the display position of the pop-up window when it is opened next time.

8. An electronic device, characterized in that: The method comprises a processor and a memory, wherein the memory stores program codes, and when the program codes are executed by the processor, the processor executes the method according to any one of claims 1 to 5.

9. A computer-readable storage medium, characterized in that: It includes program codes. When the storage medium is run on an electronic device, the program codes are used to enable the electronic device to execute the method as claimed in any one of claims 1 to 5.

10. A computer program product, characterized in that It includes computer instructions, which are stored in a computer-readable storage medium; when a processor of an electronic device obtains the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, so that the electronic device executes the method as claimed in any one of claims 1 to 5.

Images