A drag operation processing method, device, equipment and medium

Abstract

The application discloses a drag operation processing method, device and equipment and a medium. The method comprises the following steps: in response to a drag operation of a mouse pointer in a target area of a target webpage, obtaining historical running data of the mouse pointer; determining a predicted operation end point of the mouse pointer according to the historical running data; in response to the predicted operation end point being located in an independent area in the target webpage, generating a transparent mask layer above the independent area; the independent area is not overlapped with the target area, the independent area can capture the drag operation of the mouse pointer, the independent area can cancel the captured drag operation of the mouse pointer, and the transparent mask layer is used for shielding the drag operation of the mouse pointer captured by the independent area; and in response to the termination of the drag operation, removing the transparent mask layer. The application can reduce the rendering burden and performance consumption of the webpage and improve the user experience.

Description

Technical Field

[0001] This invention relates to the field of front-end technology, and in particular to a drag-and-drop operation processing method, apparatus, device, and medium. Background Technology

[0002] As web applications become increasingly complex, pages often embed content areas from various sources, such as inline frames and browser plugin windows. These independent areas have their own rendering environments and event response mechanisms. When performing drag-and-drop operations on a webpage, if the mouse pointer passes over one of these independent areas, the drag event may be lost or malfunction, thus affecting the user experience. To avoid this problem, a transparent overlay layer is usually placed above the independent areas to intercept mouse events and ensure the continuity of drag-and-drop operations.

[0003] Currently, in order to prevent mouse events from being intercepted by independent areas during dragging, a transparent mask layer is usually generated above all independent areas that may interfere with dragging when the dragging operation begins.

[0004] However, the existing technology causes the mask layer to cover an independent area for a long time during the dragging process, which increases the page rendering burden, causes additional performance consumption, and affects the user experience. Summary of the Invention

[0005] This invention provides a drag-and-drop operation processing method, apparatus, device, and medium. The embodiments of this invention can reduce the rendering burden and performance consumption of the page, and improve the user experience.

[0006] In a first aspect, embodiments of the present invention provide a drag-and-drop operation processing method, the method comprising:

[0007] In response to mouse pointer dragging operations in the target area of ​​the target webpage, obtain the historical running data of the mouse pointer;

[0008] Based on historical operation data, determine the predicted endpoint of the mouse pointer operation;

[0009] In response to the predicted endpoint of the operation being located in an independent area on the target webpage, a transparent overlay layer is generated above the independent area; the independent area does not overlap with the target area, the independent area can capture mouse pointer drag operations, the independent area can cancel the captured mouse pointer drag operations, and the transparent overlay layer is used to block the independent area from capturing mouse pointer drag operations.

[0010] In response to the termination of the drag operation, remove the transparent overlay layer.

[0011] Secondly, embodiments of the present invention also provide a drag-and-drop operation processing device, the device comprising:

[0012] The data acquisition module is used to acquire historical mouse pointer data in response to dragging operations of the mouse pointer in the target area of ​​the target webpage.

[0013] The mouse pointer prediction module is used to determine the endpoint of the mouse pointer prediction operation based on historical running data.

[0014] The mask layer generation module is used to generate a transparent mask layer on top of an independent area in the target webpage in response to the predicted operation endpoint being located in an independent area. The independent area does not overlap with the target area. The independent area can capture mouse pointer drag operations and can cancel the captured mouse pointer drag operations. The transparent mask layer is used to block the independent area from capturing mouse pointer drag operations.

[0015] The mask removal module is used to remove the transparent mask layer in response to the termination of the drag operation.

[0016] Thirdly, embodiments of the present invention also provide a drag-and-drop operation processing device, the drag-and-drop operation processing device comprising:

[0017] At least one processor; and

[0018] A memory that is communicatively connected to at least one processor; wherein,

[0019] The memory stores a computer program that can be executed by at least one processor, such that the at least one processor is able to perform the drag-and-drop operation processing method of any embodiment of the present invention.

[0020] Fourthly, embodiments of the present invention also provide a computer-readable storage medium storing computer instructions, which are used to cause a processor to execute and implement the drag-and-drop operation processing method of any embodiment of the present invention.

[0021] The technical solution of this invention obtains historical mouse pointer operation data during dragging operations in the target area of ​​a webpage, providing basic data support for predicting the endpoint of the mouse pointer operation. By using historical operation data to determine the endpoint of the mouse pointer operation, the final position of the mouse pointer can be predicted in advance. By generating a transparent overlay layer when the predicted endpoint is located in an independent area, a covering structure can be added to the independent area to prevent the independent area from canceling the drag operation of the mouse pointer, thereby ensuring that the dragging process is not interrupted. By removing the transparent overlay layer after the drag operation ends, the page rendering burden can be reduced. This solves the technical problem that the existing technology causes the overlay layer created during the dragging process to cover the independent area for a long time, increasing the page rendering burden, causing additional performance consumption, and affecting the user experience. This invention can reduce the page rendering burden and performance consumption, and improve the user experience.

[0022] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of the present invention, nor is it intended to limit the scope of the invention. Other features of the invention will become readily apparent from the following description. Attached Figure Description

[0023] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0024] Figure 1 A flowchart of a drag-and-drop operation processing method provided in an embodiment of the present invention;

[0025] Figure 2 A flowchart of a drag-and-drop operation processing method provided in an embodiment of the present invention;

[0026] Figure 3 This is a schematic diagram of a drag-and-drop operation processing device provided in an embodiment of the present invention;

[0027] Figure 4 This is a schematic diagram of a drag-and-drop operation processing device provided in an embodiment of the present invention. Detailed Implementation

[0028] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0029] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0030] In the technical solutions of this invention, the acquisition, storage, and application of historical mouse pointer operation data, predicted operation endpoints, and transparent masking layers all comply with relevant laws and regulations and do not violate public order and good morals.

[0031] Figure 1 This is a flowchart illustrating a drag-and-drop operation processing method provided by an embodiment of the present invention. This embodiment of the present invention is applicable to situations where, during a drag-and-drop operation on a webpage, the drag-and-drop event is lost or malfunctions if the mouse pointer passes through the aforementioned independent area. This method can be executed by a drag-and-drop operation processing device, which can be implemented in hardware and / or software.

[0032] See Figure 1 The drag-and-drop operation processing method shown includes:

[0033] S101. In response to the dragging operation of the mouse pointer in the target area of ​​the target webpage, obtain the historical running data of the mouse pointer.

[0034] The target webpage can refer to a webpage that allows the mouse pointer to perform drag-and-drop operations. A target webpage can include multiple sub-areas, such as a target area and independent areas. The target webpage is not limited to a specific type of webpage; its type can include static webpages and dynamic webpages, among others. For example, an e-commerce webpage containing a product list, where some products can be dragged to the shopping cart area, can be considered a target webpage.

[0035] The target area refers to the region within the target webpage where a drag-and-drop operation will not be terminated or canceled. The target area is located within the target webpage and is the starting point for the drag-and-drop operation. The target area does not overlap with any other independent regions. The determination of whether a region is a target area is based on whether the drag-and-drop operation within that region is interrupted, rather than relying on the tag type within the webpage.

[0036] Drag and drop refers to the interactive behavior in which a user moves an object or element from its starting position to its target position by continuously pressing the mouse button and moving the mouse pointer. The starting position is located in the target area. The drag and drop operation of the mouse pointer may pass through independent areas, but the drag and drop operation of the mouse pointer will always pass through the target area.

[0037] Historical operation data refers to the movement data of the mouse pointer within a preset historical time window. This data can include timestamps, position coordinates (X, Y), speed, direction, etc., and is stored in a time series format. By collecting the instantaneous position of the mouse pointer and correlating it with time information, a dataset suitable for motion trend analysis is formed. Historical operation data provides input data for predicting the endpoint of an operation, allowing for advance assessment of the mouse's possible landing point. For example, historical operation data could record 10 mouse position points and their corresponding timestamps within the past 500 milliseconds.

[0038] Optionally, the historical time window can be a fixed period of time, such as 500 milliseconds, 1 second, or 2 seconds. The historical running data will capture all information such as the position, speed, and direction of the mouse pointer within the specified period of time, so as to carry out subsequent prediction and trend analysis.

[0039] The length of the historical time window can also be dynamically adjusted according to the user's operation mode. For example, the length of the historical time window can be dynamically adjusted in real time based on the different mouse movement speed and dragging behavior, automatically increasing or decreasing the length of the time window according to the movement of the mouse pointer. During fast dragging operations, the time window may be shorter to avoid interference from too much historical data; while during slow movement, the time window will be appropriately extended to ensure that enough data is captured to provide accurate predictions.

[0040] S102. Based on historical operation data, determine the predicted endpoint of the mouse pointer operation.

[0041] The predicted endpoint of the operation refers to the likely final position of the mouse pointer drag operation inferred from historical operation data. The predicted endpoint corresponds to a specific coordinate point on the target webpage, with definite X and Y coordinates. By analyzing the trends (speed, direction, and position, etc.) of historical operation data, and using mathematical models (such as vector extrapolation and curve fitting models) or deep learning models, the possible stopping position of the mouse can be predicted.

[0042] Optionally, when the mouse pointer dragging operation causes the predicted endpoint to exceed the visible range of the target webpage, the abnormal situation is first identified, and the predicted endpoint is automatically adjusted back to the valid area of ​​the webpage. This ensures that the user's dragging operation is not misled and guarantees the consistency of the interactive interface. If the adjustment fails or the mouse operation continues to exceed the boundary, the boundary check mechanism is triggered to automatically prevent further dragging operations. At this time, the user will see a prompt message to avoid user misoperation.

[0043] S103. In response to the prediction that the endpoint of the operation is located in an independent area on the target webpage, a transparent overlay layer is generated above the independent area; the independent area does not overlap with the target area, the independent area can capture the drag operation of the mouse pointer, the independent area can cancel the captured drag operation of the mouse pointer, and the transparent overlay layer is used to block the independent area from capturing the drag operation of the mouse pointer.

[0044] In this context, an independent region refers to a specific area on the target webpage where a drag-and-drop operation would be interrupted if it passed through that area. Because independent regions possess their own independent event handling and rendering environment capabilities—such as cross-origin embedded webpages, plugin windows, and embedded multimedia containers—mouse events are preferentially received by that independent region when a drag-and-drop operation passes through it. This causes the drag-and-drop operation in the target region to be interrupted or reset, manifesting as the drag-and-drop operation being canceled or rendered ineffective.

[0045] A transparent overlay layer refers to a layer placed over a separate area to prevent mouse events, including drag-and-drop operations, from being passed to page elements within that area. The transparent overlay layer has 100% transparency and is positioned higher than the separate area in the page rendering hierarchy. Its size and position match the separate area. Utilizing the browser's event capturing mechanism, the transparent overlay layer prioritizes receiving mouse events and prevents them from propagating down to the separate area. By shielding the separate area from drag-and-drop operations, the transparent overlay layer maintains visual and logical continuity during the drag-and-drop process.

[0046] S104. In response to the termination of the drag operation, remove the transparent overlay layer.

[0047] Specifically, once the mouse pointer dragging operation is detected to have ended, the generated transparent overlay is removed. This removal includes not only deleting the transparent overlay object from the element tree of the target webpage at the page rendering level, but also clearing it through style control or graphics rendering layer, so that the transparent overlay no longer affects the interaction of webpage elements, thereby reducing page rendering and improving page performance.

[0048] Optionally, in some cases, due to factors such as rendering delays of web pages or browsers, system resource issues, etc., the operation of removing the transparent overlay may fail. When the operation of removing the transparent overlay fails, the status of the removal request will be checked first, and an error message mechanism will be automatically triggered to inform the user that the operation failed. The transparent overlay will be retried in the background. If the second operation of removing the transparent overlay still fails, the reason for the failure of removing the transparent overlay will be recorded for the developer to check later.

[0049] As can be seen, in this embodiment, historical mouse pointer data is obtained during dragging operations in the target area of ​​the target webpage, providing basic data support for predicting the endpoint of the mouse pointer operation. By using historical data to determine the endpoint of the mouse pointer operation, the final position of the mouse pointer can be predicted in advance. By generating a transparent overlay layer when the predicted endpoint is located in an independent area, an overlay structure can be added to the independent area to prevent the independent area from canceling the dragging operation of the mouse pointer, thereby ensuring that the dragging process is not interrupted. By removing the transparent overlay layer after the dragging operation ends, the page rendering burden can be reduced. This solves the technical problem that the existing technology causes the overlay layer created during the dragging process to cover the independent area for a long time, increasing the page rendering burden, causing additional performance consumption, and affecting the user experience. The embodiments of the present invention can reduce the page rendering burden and performance consumption, and improve the user experience.

[0050] In an optional embodiment, Figure 2 The flowchart of a drag-and-drop operation processing method provided in this embodiment of the invention refines the statement "in response to the prediction that the endpoint of the operation is located in an independent area in the target webpage, a transparent mask layer is generated above the independent area" to "based on the independent area, an extended area of ​​the independent area is generated; in response to the prediction that the endpoint of the operation is located in the independent area or the extended area, a transparent mask layer is generated on the union of the independent area and the extended area" to improve the drag-and-drop operation processing.

[0051] It should be noted that for parts not described in detail in the embodiments of the present invention, please refer to the descriptions in other embodiments.

[0052] See Figure 2 The drag-and-drop operation processing method shown includes:

[0053] S201. In response to the dragging operation of the mouse pointer in the target area of ​​the target webpage, obtain the historical running data of the mouse pointer.

[0054] S202. Based on historical operation data, determine the predicted endpoint of the mouse pointer operation.

[0055] S203. Generate an extended region of the independent region based on the independent region. The extended region is a virtual region located around the independent region. The extended region is adjacent to the independent region and can capture mouse pointer drag operations. The independent region does not overlap with the target region. The independent region can capture mouse pointer drag operations and can cancel captured mouse pointer drag operations. A transparent mask layer is used to block the independent region from capturing mouse pointer drag operations.

[0056] The extended region refers to a virtual region added to the outside of the independent region by expanding its boundaries. The extended region is an extension of the independent region, and the union of the extended and independent regions determines the range of the generated mask layer. The extended and independent regions are connected. By adding an extended region outside the independent region, even if the predicted operation endpoint is not inside the independent region, the masking logic can be triggered in advance when the mouse pointer approaches the boundary of the independent region, avoiding the inability to generate a transparent mask layer on the independent region due to high-speed mouse movement or prediction errors.

[0057] S204. In response to the prediction operation endpoint being located in an independent region or an extended region, a transparent mask layer is generated on the union of the independent region and the extended region.

[0058] Specifically, when the predicted endpoint of the mouse pointer operation falls within either the independent or extended region, a transparent mask layer is generated above the union of the independent and extended regions. The union region covers all positions within both the independent and extended regions, without recalculating the overlapping portions.

[0059] S205. In response to the termination of the drag operation, remove the transparent overlay layer.

[0060] As can be seen, in this embodiment, by generating an extended area based on the independent area, the shielding range can be increased to cover the mouse operation area that may be close to the independent area in advance. By generating the extended area, it can be ensured that the generation of the transparent mask layer is triggered in time when the mouse approaches the independent area, avoiding accidental touches or operation conflicts. By generating a transparent mask layer that includes the union of the independent area and the extended area, the interactive behavior of the target area and its surrounding area can be effectively shielded, avoiding unnecessary drag operations from being captured. By covering the extended area with the mask layer, it can be ensured that mouse operations are not captured by the independent area too early, reducing the probability of accidental touches.

[0061] In some embodiments, generating a transparent mask layer on the union of the independent region and the extended region includes:

[0062] Get the dimensions of the independent region and the expanded region;

[0063] Calculate the total size of the independent region and the extended region based on the size of the independent region and the size of the extended region;

[0064] Based on the total size, generate a transparent mask layer of total size on the union of the independent and extended regions.

[0065] Size refers to the amount of space occupied by a standalone or extended area on a webpage. Size is typically expressed as length and width, but it can also be a specific pixel value, representing the actual physical size of the area. For example, the size changes as the webpage scales; at 100% scale, the size is x, and at 200% scale, the size is 2x. The total size can refer to the sum of the sizes of the standalone and extended areas.

[0066] As can be seen, in this embodiment, by calculating the total size of the independent region and the extended region, the union size of the two regions can be obtained, thereby providing a precise spatial range for generating the masking layer, ensuring that the transparent masking layer can completely cover all parts of the independent region and its extended region, and avoiding insufficient or misaligned masking layer coverage.

[0067] In some embodiments, historical operation data includes: historical location coordinates, historical location timestamps, historical movement speed, and historical movement direction.

[0068] Historical position coordinates refer to the two-dimensional coordinate data of the various locations the mouse pointer has traversed over a past period. These coordinates are typically recorded by the page element's position system, representing the mouse pointer's historical movement trajectory on the page. Historical position coordinates are recorded by page scripts or browser event listeners and stored as a time series. By collecting historical position coordinates, the mouse pointer's trajectory can be tracked, thereby predicting future operation endpoints.

[0069] The historical position timestamp refers to the point in time when the historical position coordinates of the mouse pointer were recorded. The historical position timestamp is used to supplement each historical position coordinate with a time dimension, making the historical position coordinates time-series data.

[0070] Historical movement speed refers to the distance the mouse pointer travels per unit of time over a past period. It indicates how fast the mouse pointer moves on a webpage.

[0071] The historical movement direction refers to the direction of the mouse pointer's movement over a past period of time. Historical movement direction is usually expressed in angles or radians. It is determined by calculating the slope between two consecutive historical position coordinates.

[0072] As can be seen, in this embodiment, by limiting the historical operation data to historical position coordinates, historical position timestamps, historical movement speed, and historical movement direction, complete mouse behavior data can be provided, which provides rich information for subsequent mouse operation prediction and analysis. This can effectively analyze the mouse movement pattern, help build a more accurate trajectory prediction model, and thus improve the accuracy of prediction.

[0073] In some embodiments, determining the predicted endpoint of the mouse pointer operation based on historical execution data includes:

[0074] Historical running data is input into a pre-trained mouse trajectory prediction model to obtain the predicted trajectory of the mouse pointer;

[0075] Based on the predicted trajectory, determine the predicted endpoint of the mouse pointer operation.

[0076] In this context, a mouse trajectory prediction model can refer to a model that takes historical running data as input and outputs a predicted trajectory of the mouse pointer. In a specific example, the mouse trajectory prediction model extracts features from historical running data, encodes the extracted features, and obtains the predicted trajectory of the mouse pointer.

[0077] The predicted trajectory refers to the predicted future movement path of the mouse pointer. Based on historical data, algorithms or models predict the future path of the mouse pointer, thus enabling the prediction of the mouse's next movement trajectory based on historical movement trends.

[0078] Optionally, by adjusting the parameters in Foresight JavaScript, the predicted trajectory of the mouse pointer can also be obtained.

[0079] As can be seen, in this embodiment, by determining the predicted operation endpoint based on historical operation data, the position where the mouse is about to arrive can be predicted in advance, avoiding delays or inaccurate feedback during user operation. By inputting historical operation data into the pre-trained mouse trajectory prediction model, the existing model can be used for accurate prediction, thereby reducing the need for processing real-time data and improving system efficiency. By using the pre-trained model, the high computational cost of training the model from scratch can be avoided, while making full use of the prediction capabilities of existing data and models.

[0080] In some embodiments, the endpoint of the prediction operation is located in a separate area on the target webpage, including:

[0081] Obtain the location coordinates of the endpoint of the prediction operation;

[0082] Determine the area corresponding to the location coordinates;

[0083] When the type of the determined region is an embedded region, the endpoint of the prediction operation is determined to be located in an independent region.

[0084] Embedded areas can refer to other content or component areas embedded within a webpage, such as embedded multimedia players, advertising boxes, and external webpages. Embedded areas typically load external content using embed tags.

[0085] As can be seen, in this embodiment, by obtaining the position coordinates of the predicted operation endpoint, the final target position of the mouse can be accurately located, providing accurate data for the subsequent generation of the mask layer. By determining the corresponding area based on the position coordinates, accurate identification of different areas can be achieved, ensuring that the operation is only performed within the effective area. By determining that the area type is an embedded area, it is possible to avoid mistakenly taking non-interactive areas as effective areas, thereby improving the accuracy of interaction and user experience.

[0086] In some embodiments, the independent area includes: embedded video, embedded web page, and plug-in window.

[0087] Embedded video refers to multimedia video content directly embedded in a webpage. Embedded webpage refers to content accessed through... <iframe>Another complete web page is embedded in the current web page as a label. Here, the plug-in window may refer to a window or interactive area that can be embedded in a web page generated by a browser plug-in or extension program.

[0088] It can be seen that in this embodiment, by defining the independent area as an embedded video, an embedded web page, and a plug-in window, it helps to improve the user experience. The above-mentioned specific types of embedded areas respond to user operations, reducing the computational complexity and unnecessary event listening, making the system more efficient in response.

[0089] Figure 3 A schematic structural diagram of a drag operation processing device provided by an embodiment of the present invention. The embodiment of the present invention is applicable to the situation where when performing a drag operation on a web page, if the mouse pointer passes through the above-mentioned independent area, it may cause the drag event to be lost or abnormal. This device can execute the drag operation processing method, and this device can be implemented in the form of hardware and / or software.

[0090] Referring to the drag operation processing device shown in Figure 3, it includes: a data acquisition module 301, a mouse pointer prediction module 302, a mask layer generation module 303, and a mask layer removal module 304, where,

[0091] The data acquisition module 301 is configured to acquire the historical running data of the mouse pointer in response to a drag operation of the mouse pointer in a target area of a target web page;

[0092] The mouse pointer prediction module 302 is configured to determine the predicted operation end point of the mouse pointer according to the historical running data;

[0093] The mask layer generation module 303 is configured to generate a transparent mask layer above the independent area in response to the predicted operation end point being located in the independent area of the target web page; the independent area does not overlap with the target area, the independent area can capture the drag operation of the mouse pointer, the independent area can cancel the captured drag operation of the mouse pointer, and the transparent mask layer is used to shield the independent area from capturing the drag operation of the mouse pointer;

[0094] The mask layer removal module 304 is configured to remove the transparent mask layer in response to the termination of the drag operation.

[0095] The technical solution of this embodiment of the invention obtains the historical running data of the mouse pointer when the mouse pointer is dragged in the target area of ​​the target webpage, which provides basic data support for predicting the endpoint of the mouse pointer operation. By using the historical running data to determine the endpoint of the mouse pointer operation, the final position of the mouse pointer can be predicted in advance. By generating a transparent mask layer when the endpoint of the predicted operation is located in an independent area, a covering structure can be added to the independent area to prevent the independent area from canceling the drag operation of the mouse pointer, thereby ensuring that the dragging process is not interrupted. By removing the transparent mask layer after the dragging operation ends, the page rendering burden can be reduced. This solves the technical problem that the existing technology causes the mask layer created during the dragging process to cover the independent area for a long time, which increases the page rendering burden, causes additional performance consumption, and affects the user experience. This embodiment of the invention can reduce the page rendering burden and performance consumption and improve the user experience.

[0096] In some embodiments, in generating a transparent mask layer over an independent region in response to the prediction operation endpoint being located in an independent region of the target webpage, the mask layer generation module 303 is specifically configured to:

[0097] Based on the independent region, an extended region of the independent region is generated; the extended region is a virtual region located around the independent region, adjacent to the independent region, and the extended region can capture the drag operation of the mouse pointer;

[0098] In response to the prediction operation endpoint being located in an independent region or an extended region, a transparent mask layer is generated on the union of the independent region and the extended region.

[0099] In some embodiments, the mask layer generation module 303 is specifically configured to: generate a transparent mask layer on the union of the independent region and the extended region.

[0100] Obtain the dimensions of the independent region and the extended region;

[0101] Calculate the total size of the independent region and the extended region based on the size of the independent region and the size of the extended region;

[0102] Based on the total size, a transparent mask layer of total size is generated on the union of the independent region and the extended region.

[0103] In some embodiments, historical operation data includes: historical location coordinates, historical location timestamps, historical movement speed and historical movement direction.

[0104] In some embodiments, in terms of determining the predicted operation end point of the mouse pointer according to historical operation data, the mouse pointer prediction module 302 is specifically configured to:

[0105] Input the historical operation data into a pre-trained mouse trajectory prediction model to obtain the predicted trajectory of the mouse pointer;

[0106] Determine the predicted operation end point of the mouse pointer according to the predicted trajectory.

[0107] In some embodiments, in terms of the predicted operation end point being located in an independent area of the target web page, the mask layer generation module 303 is specifically configured to:

[0108] Obtain the position coordinates of the predicted operation end point;

[0109] Determine the area corresponding to the position coordinates according to the position coordinates;

[0110] When it is determined that the type of the area is an embedded area, it is determined that the predicted operation end point is located in an independent area.

[0111] In some embodiments, the independent areas include: embedded videos, embedded web pages, and plug-in windows.

[0112] The drag operation processing device provided by the embodiments of the present invention can execute the drag operation processing method provided by any embodiment of the present invention, and has corresponding functional modules and beneficial effects for executing the drag operation processing method.

[0113] Figure 4 is a schematic structural diagram of a drag operation processing device provided by an embodiment of the present invention.

[0114] As shown in Figure 4, the drag operation processing device 400 includes at least one processor 401 and a memory communicatively connected to the at least one processor 401, such as a read-only memory (ROM) 402, a random access memory (RAM) 403, etc. Among them, the memory stores a computer program executable by the at least one processor. The processor 401 can execute various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 402 or the computer program loaded from the storage unit 408 into the random access memory (RAM) 403. In the RAM 403, various programs and data required for the operation of the drag operation processing device 400 can also be stored. The processor 401, the ROM 402, and the RAM 403 are connected to each other through a bus 404. The input / output (I / O) interface 408 is also connected to the bus 404.

[0115] Multiple components in the drag operation processing device 400 are connected to the I / O interface 405, including: an input unit 406, such as a keyboard, a mouse, etc.; an output unit 407, such as various types of displays, speakers, etc.; a storage unit 408, such as a disk, an optical disc, etc.; and a communication unit 409, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 409 allows the drag operation processing device 400 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0116] The processor 401 can be various general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the processor 401 include but are not limited to a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The processor 401 executes the various methods and processes described above, such as the drag operation processing method.

[0117] In some embodiments, the drag operation processing method can be implemented as a computer program, which is tangibly included in a computer-readable storage medium, such as the storage unit 408. In some embodiments, part or all of the computer program can be loaded and / or installed onto the drag operation processing device 400 via the ROM 402 and / or the communication unit 409.When the computer program is loaded into RAM 403 and executed by processor 401, one or more steps of the drag-and-drop operation processing method described above can be performed. Alternatively, in other embodiments, processor 401 may be configured to perform the drag-and-drop operation processing method by any other suitable means (e.g., by means of firmware).

[0118] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SOCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include: implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0119] Computer programs for implementing the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The computer programs may be executed entirely on the machine, partially on the machine, or as a standalone software package, partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0120] In the context of this invention, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0121] To provide interaction with the user, the systems and techniques described herein can be implemented on an operation detection device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the drag-and-drop operation processing device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0122] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0123] A computing system may include clients and servers. Clients and servers are generally located far apart and typically interact through a communication network. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system to solve the shortcomings of traditional physical hosts and VPS (Virtual Private Server) services, such as high management difficulty and weak business scalability.

[0124] It should be understood that the various forms of processes shown above can be used to reorder, add, or delete steps. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and no limitation is imposed herein.

[0125] The above specific embodiments do not constitute a limitation on the scope of protection of the present invention.Those skilled in the art will understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.< / iframe>

Claims

1. A method of processing a drag operation, characterized by, The method comprises: in response to a drag operation of a mouse pointer in a target area of a target webpage, obtaining historical running data of the mouse pointer; determining a predicted operation end point of the mouse pointer according to the historical running data; in response to the predicted operation end point being located in an independent area in the target webpage, generating a transparent mask layer above the independent area, comprising: generating an extended area of the independent area according to the independent area; the extended area is a virtual area located around the independent area, the extended area is adjacent to the independent area, and the extended area can capture the drag operation of the mouse pointer; in response to the predicted operation end point being located in the independent area or the extended area, generating a transparent mask layer on the union set of the independent area and the extended area; the independent area does not overlap with the target area, the independent area can capture the drag operation of the mouse pointer, the independent area can cancel the captured drag operation of the mouse pointer, and the transparent mask layer is used to shield the independent area and the extended area from capturing the drag operation of the mouse pointer; in response to termination of the drag operation, removing the transparent mask layer.

2. The method of claim 1, wherein, The generation of the transparent mask layer on the union set of the independent area and the extended area comprises: obtaining the size of the independent area and the size of the extended area; calculating the total size of the independent area and the extended area according to the size of the independent area and the size of the extended area; according to the total size, generating a transparent mask layer with the total size on the union set of the independent area and the extended area.

3. The method of claim 1, wherein, The historical running data comprises: historical position coordinates, historical position time stamps, historical moving speed and historical moving direction.

4. The method of claim 1, wherein, The determination of the predicted operation end point of the mouse pointer according to the historical running data comprises: inputting the historical running data into a pre-trained mouse trajectory prediction model to obtain a predicted trajectory of the mouse pointer; determining the predicted operation end point of the mouse pointer according to the predicted trajectory.

5. The method of claim 1, wherein, The predicted operation end point is located in an independent area in the target webpage, comprising: obtaining the position coordinates of the predicted operation end point; determining the area corresponding to the position coordinates according to the position coordinates; when it is determined that the type of the area is an embedded area, it is determined that the predicted operation end point is located in the independent area.

6. The method of claim 5, wherein, The independent area comprises: an embedded video, an embedded webpage and a plug-in window.

7. A drag operation processing apparatus characterized by comprising: comprise: a data acquisition module configured to obtain historical running data of a mouse pointer in response to a drag operation of the mouse pointer in a target area of a target webpage; a mouse pointer prediction module configured to determine a predicted operation end point of the mouse pointer according to the historical running data; The mask layer generation module is configured to, in response to the predicted operation end point being located in an independent region in the target webpage, generate a transparent mask layer above the independent region, including: generating an extended region of the independent region according to the independent region; the extended region is a virtual region located around the independent region, the extended region is adjacent to the independent region, and the extended region can capture the drag operation of the mouse pointer; in response to the predicted operation end point being located in the independent region or the extended region, generating a transparent mask layer on the union of the independent region and the extended region; the independent region is non-overlapping with the target region, the independent region can capture the drag operation of the mouse pointer, the independent region can cancel the captured drag operation of the mouse pointer, and the transparent mask layer is used to shield the independent region and the extended region from capturing the drag operation of the mouse pointer. The mask layer removal module is configured to, in response to the drag operation being terminated, remove the transparent mask layer.

8. A drag operation processing apparatus characterized by comprising: The drag operation processing device includes: at least one processor; and a memory connected in communication with the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to execute the drag operation processing method in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer instructions for enabling the processor to execute the drag operation processing method in any one of claims 1-6 when executed by the processor.

Images