Cross-domain dragging method, device, equipment and storage medium based on web page interface

Abstract

The present invention relates to artificial intelligence technology and discloses a cross-domain dragging method based on a webpage interface, comprising: obtaining element information of the dragged element based on a user's drag command; performing a drag animation rendering on the main-domain drag event corresponding to the drag command based on the element information, and determining the main-domain page and sub-domain page; sending the event information and element information of the main-domain drag event to a virtual node of the sub-domain page, triggering a sub-domain drag event of the virtual node, and performing insertion animation rendering on the sub-domain page; generating a real node corresponding to the virtual node based on the element information, inserting the real node into the sub-domain page, and performing page rendering on the sub-domain page after the real node is inserted, thereby completing the cross-domain dragging. Furthermore, the present invention relates to blockchain technology, and element information can be stored in blockchain nodes. The present invention also proposes a cross-domain dragging device, equipment, and storage medium based on a webpage interface. The present invention can improve the efficiency of cross-domain dragging of webpages.

Description

Technical Field

[0001] The present invention relates to the field of artificial intelligence technology, and in particular to a cross-domain dragging method, apparatus, device and storage medium based on a web page interface. Background Art

[0002] With the advent of the digital age, more and more organizations have their own websites. At the same time, the functions of web pages have become more complex and diverse. Some web pages even provide online editing functions, which allow users to perform module editing by dragging and dropping elements in the web page.

[0003] Most existing web page drag-and-drop technologies are based on the same page and the same domain. For example, elements in a web page are dragged and inserted based on the sortable.js plug-in. In actual applications, there are scenarios where elements need to be dragged across domains. At this time, it is necessary to rely on json data to change the data structure of the subdomain and re-render the page, which may cause graphical nodes to be reused, resulting in low efficiency when dragging web pages across domains. Summary of the Invention

[0004] The present invention provides a cross-domain dragging method, apparatus, device and storage medium based on a web page interface, the main purpose of which is to solve the problem of low efficiency when performing cross-domain dragging of web pages.

[0005] To achieve the above-mentioned purpose, the present invention provides a cross-domain dragging method based on a web page interface, comprising:

[0006] Receive a drag command from the user, and obtain element information of the dragged element according to the drag command;

[0007] Performing drag animation rendering on the main domain drag event corresponding to the drag instruction according to the element information, and determining the main domain page and the subdomain page according to the main domain drag event;

[0008] Sending event information of the main domain drag event to the subdomain page, and receiving the element information according to the event information through the virtual node of the subdomain page;

[0009] Triggering a subdomain drag event of the virtual node through the element information, and inserting animation rendering into the subdomain page according to the subdomain drag event;

[0010] Generate node attributes of the virtual node according to the element information, generate a real node in real time according to the node attributes, insert the real node into the subdomain page, render the subdomain page after inserting the real node, and complete cross-domain dragging.

[0011] Optionally, acquiring element information of the dragged element according to the drag instruction includes:

[0012] Determining the initial page position coordinates of the dragged element according to the drag instruction;

[0013] Determining the element name of the dragged element according to the initial page position coordinates;

[0014] The element information of the dragged element is obtained according to the element name.

[0015] Optionally, performing a drag animation rendering on the main domain drag event corresponding to the drag instruction according to the element information includes:

[0016] Identifying the element type of the dragged element according to the element information;

[0017] Create a small drag image for the main domain drag event according to the element type;

[0018] A drag animation of the main domain drag event is generated according to the small drag image and the drag instruction, and the drag animation rendering is completed.

[0019] Optionally, determining the main domain page and the subdomain page according to the main domain drag event includes:

[0020] The page corresponding to the initial page position coordinates is used as the main domain page;

[0021] Obtaining a mouse displacement record from the main domain drag event;

[0022] Calculating the ending page position coordinates based on the mouse displacement record and the initial page position coordinates;

[0023] The page corresponding to the end page position coordinates is used as the subdomain page.

[0024] Optionally, the sending of the event information of the main domain drag event to the subdomain page, and receiving the element information according to the event information through the virtual node of the subdomain page, includes:

[0025] Using a preset cross-domain notification method, the event information of the main domain drag event is sent to the sub-domain page;

[0026] Selecting the virtual node according to the event information using the subdomain page, and sending return information of the event information to the main domain page;

[0027] The element information is sent to the virtual node according to the returned information using the main domain page.

[0028] Optionally, generating node attributes of the virtual node according to the element information, and generating a real node in real time according to the node attributes, includes:

[0029] Extracting element attributes of the dragged element from the element information, and using the element attributes as node attributes of the virtual node;

[0030] Creating a virtual object of the virtual node according to the node attributes;

[0031] The virtual object is rendered to obtain the real node.

[0032] Optionally, inserting the real node into the subdomain page includes:

[0033] Obtaining a node label of the virtual node;

[0034] Replacing the virtual node with the real node according to the node label;

[0035] The real node is added to the page list of the subdomain page.

[0036] In order to solve the above problems, the present invention further provides a cross-domain dragging device based on a web page interface, the device comprising:

[0037] An element information module is used to receive a user's drag command and obtain element information of the dragged element according to the drag command;

[0038] a drag animation module, configured to render a drag animation for a main domain drag event corresponding to the drag instruction according to the element information, and determine a main domain page and a subdomain page according to the main domain drag event;

[0039] An information transmission module, configured to send event information of the main domain drag event to the subdomain page, and receive the element information according to the event information through a virtual node of the subdomain page;

[0040] An insertion animation module is used to trigger a subdomain drag event of the virtual node through the element information, and perform insertion animation rendering in the subdomain page according to the subdomain drag event;

[0041] The page rendering module is used to generate node attributes of the virtual node according to the element information, generate a real node in real time according to the node attributes, insert the real node into the subdomain page, and render the subdomain page after inserting the real node to complete cross-domain dragging.

[0042] In order to solve the above problem, the present invention further provides a device, comprising:

[0043] at least one processor; and,

[0044] a memory communicatively connected to the at least one processor; wherein,

[0045] The memory stores a computer program that can be executed by the at least one processor. The computer program is executed by the at least one processor to enable the at least one processor to execute the above-mentioned cross-domain drag method based on the web page interface.

[0046] In order to solve the above problem, the present invention also provides a storage medium, in which at least one computer program is stored. The at least one computer program is executed by a processor in a device to implement the above-mentioned cross-domain drag method based on a web page interface.

[0047] The embodiment of the present invention obtains the element information of the dragged element through the drag instruction, and can accurately obtain the element information, which facilitates the subsequent insertion of the element information and the functions realized by the element information into the subdomain page. The main domain drag event corresponding to the drag instruction is rendered with the element information, and the main domain page and the subdomain page are determined, which facilitates data communication between the main domain page and the subdomain page. At the same time, the drag progress can be displayed to the user in real time through the drag animation in the main domain page. By using the cross-domain notification method to send the event information of the main domain drag event to the subdomain page, the data interaction between the main domain page and the subdomain page can be guaranteed, and cross-domain interaction can be realized. By using the virtual node to receive the element information , it can achieve the effect of dragging elements across domains without changing the data structure of the subdomain, and also improve the efficiency of cross-domain dragging. The subdomain drag event of the virtual node is triggered by the element information, and animation rendering is inserted into the subdomain page according to the subdomain drag event, which can realize drag insertion rendering without data drive, improve the performance of cross-domain dragging, ensure the smoothness of cross-domain dragging, and improve user experience. The real node is generated in real time through the node attributes, and the real node is inserted into the subdomain page. The subdomain page after the real node is inserted is rendered, and the drag node can be rendered in real time to maintain the function of the dragged element. At the same time, it is ensured that the graphical node will not reuse the instance, thereby improving the efficiency of cross-domain dragging. Therefore, the cross-domain dragging method, device, equipment and storage medium based on the web page interface proposed by the present invention can solve the problem of low efficiency when performing cross-domain dragging of web pages. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 A schematic diagram of a cross-domain drag and drop method based on a web page interface provided by an embodiment of the present invention;

[0049] Figure 2A schematic diagram of a process for obtaining element information provided by an embodiment of the present invention;

[0050] Figure 3 A schematic diagram of a process for determining a main domain page and a subdomain page according to an embodiment of the present invention;

[0051] Figure 4 A functional module diagram of a cross-domain dragging device based on a web page interface provided by an embodiment of the present invention;

[0052] Figure 5 A schematic structural diagram of a device for implementing the cross-domain drag method based on a web page interface provided by an embodiment of the present invention.

[0053] The purpose, features and advantages of the present invention will be further described with reference to the accompanying drawings and in conjunction with the embodiments. DETAILED DESCRIPTION

[0054] It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0055] The embodiment of the present application provides a cross-domain drag and drop method based on a web page interface. The execution subject of the cross-domain drag and drop method based on a web page interface includes but is not limited to at least one of the devices such as a server, a terminal, etc. that can be configured to execute the method provided by the embodiment of the present application. In other words, the cross-domain drag and drop method based on a web page interface can be executed by software or hardware installed on a terminal device or a server device, and the software can be a blockchain platform. The server includes but is not limited to: a single server, a server cluster, a cloud server or a cloud server cluster, etc. The server can be an independent server, or it can be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0056] Reference Figure 1 FIG. 1 is a flow chart of a cross-domain drag and drop method based on a web page interface provided by an embodiment of the present invention. In this embodiment, the cross-domain drag and drop method based on a web page interface includes:

[0057] S1. Receive a drag command from the user, and obtain element information of the dragged element according to the drag command;

[0058] In the embodiment of the present invention, the dragging instruction may be a mouse dragging instruction.

[0059] In detail, the element information may be information such as element attributes and element values stored in a storage device such as a database or a blockchain.

[0060] In the embodiment of the present invention, referring to Figure 2 As shown, the step of obtaining the element information of the dragged element according to the drag instruction includes:

[0061] S21, determining the initial page position coordinates of the dragged element according to the drag instruction;

[0062] S22. Determine the element name of the dragged element according to the initial page position coordinates;

[0063] S23. Obtain element information of the dragged element according to the element name.

[0064] In detail, the drag instruction records the initial page position coordinates when the mouse is clicked through a click event, and the initial page position coordinates when the mouse is clicked are the initial page position coordinates of the dragged element.

[0065] Specifically, the element name of the dragged element can be determined according to the initial page position coordinates through JavaScript's document.elementFromPoint(x,y) function, where x is the horizontal coordinate of the initial page position coordinates; y is the vertical coordinate of the initial page position coordinates.

[0066] In detail, the element information of the dragged element may be obtained according to the element name through the getElementById function of JavaScript.

[0067] In the embodiment of the present invention, the element information of the dragged element is obtained through the drag instruction, so that the element information can be accurately obtained, which facilitates the subsequent insertion of the element information and the functions implemented by the element information into the subdomain page.

[0068] S2. Render a drag animation for the main domain drag event corresponding to the drag instruction according to the element information, and determine a main domain page and a subdomain page according to the main domain drag event;

[0069] In an embodiment of the present invention, the main domain drag event refers to an HTML event that records the events from mouse click, mouse dragging of elements to mouse release. The HTML event refers to something that occurs on an HTML element. When JavaScript is used in an HTML page, JavaScript can trigger these events.

[0070] In an embodiment of the present invention, the drag animation rendering of the main domain drag event corresponding to the drag instruction based on the element information includes: identifying the element type of the dragged element based on the element information; creating a small drag image of the main domain drag event based on the element type; generating a drag animation of the main domain drag event based on the small drag image and the drag instruction, and completing the drag animation rendering.

[0071] In detail, the element type of the dragged element may be identified according to the suffix of the element file name in the element information.

[0072] Specifically, the small drag image may be created according to the element type through the new Image function.

[0073] In detail, the DataTransfer.setDragImage function may be used to generate the drag animation of the main domain drag event according to the small drag image and the drag instruction.

[0074] In detail, the main domain page refers to the page where the dragged element is originally located, and the main domain page can be an HTML page or a JavaScript page.

[0075] Specifically, the subdomain page refers to the page where the dragged element is last located. The subdomain page is a subpage of the main domain page. The subdomain page can be an iframe tag in an HTML page.

[0076] In the embodiment of the present invention, referring to Figure 3 As shown, the determining of the main domain page and the subdomain page according to the main domain drag event includes:

[0077] S31, using the page corresponding to the initial page position coordinates as the main domain page;

[0078] S32, obtaining a mouse displacement record from the primary domain drag event;

[0079] S33, calculating the ending page position coordinates based on the mouse displacement record and the initial page position coordinates;

[0080] S34: Use the page corresponding to the end page position coordinates as the subdomain page.

[0081] In detail, the page position coordinates where the mouse is pressed can be recorded through the mousePressed method of the main domain drag event, and the page position coordinates where the mouse is released can be recorded through the mouseReleased method of the main domain drag event. The mouse displacement record can be obtained by subtracting the page position coordinates where the mouse is pressed from the page position coordinates where the mouse is released.

[0082] Specifically, the mouse displacement record may be added to the initial page position coordinates to obtain the ending page position coordinates.

[0083] In an embodiment of the present invention, a drag animation is rendered for the main domain drag event corresponding to the drag instruction through the element information, which can determine the main domain page and the sub-domain page, facilitate data communication between the main domain page and the sub-domain page, and also display the drag progress to the user in real time through the drag animation in the main domain page.

[0084] S3. Sending event information of the main domain drag event to the subdomain page, and receiving the element information according to the event information through the virtual node of the subdomain page;

[0085] In the embodiment of the present invention, the event information refers to parameter information of the drag event, such as the initial page position coordinates and the end page position coordinates.

[0086] In detail, the virtual node may refer to a virtual DOM, which is hidden by default, and the content in the virtual DOM is empty by default.

[0087] In an embodiment of the present invention, the event information of the main domain drag event is sent to the subdomain page, and the element information is received according to the event information through the virtual node of the subdomain page, including: using a preset cross-domain notification method to send the event information of the main domain drag event to the subdomain page; using the subdomain page to select the virtual node according to the event information, and sending the return information of the event information to the main domain page; using the main domain page to send the element information to the virtual node according to the return information.

[0088] In detail, the cross-domain notification method can be a postmessage method, which allows a script from one document to pass text messages to a script in another document, regardless of whether it is cross-domain. The script in one document still cannot call methods and read properties in other documents, but they can use this messaging technology to achieve secure communication.

[0089] Specifically, the return information refers to confirmation of reception information, including the node address of the virtual node, whether the reception preparation is completed, and other information.

[0090] In an embodiment of the present invention, by using a cross-domain notification method to send the event information of the main domain drag event to the sub-domain page, data interaction between the main domain page and the sub-domain page can be guaranteed, and cross-domain interaction can be achieved. By using the virtual node to receive the element information, the effect of cross-domain dragging of elements can be achieved without changing the data structure of the sub-domain, and the efficiency of cross-domain dragging is also improved.

[0091] S4. Triggering a subdomain drag event of the virtual node through the element information, and inserting animation rendering into the subdomain page according to the subdomain drag event;

[0092] In the embodiment of the present invention, the subdomain drag event refers to an HTML event that records the time from when the mouse reaches the boundary of the subdomain page to when the mouse is released.

[0093] In detail, the subdomain drag event of the virtual node may be triggered according to the element information through JavaScript.

[0094] In an embodiment of the present invention, the method of inserting animation rendering in the subdomain page according to the subdomain drag event is consistent with the method of rendering the drag animation for the main domain drag event corresponding to the drag instruction according to the element information in the above step S2, and will not be repeated here.

[0095] In an embodiment of the present invention, a subdomain drag event of the virtual node is triggered by the element information, and animation rendering is inserted into the subdomain page according to the subdomain drag event, which can realize data-free drag insertion rendering, improve the performance of cross-domain dragging, ensure the smoothness of cross-domain dragging, and enhance the user experience.

[0096] S5. Generate node attributes of the virtual node according to the element information, generate a real node in real time according to the node attributes, insert the real node into the subdomain page, render the subdomain page after inserting the real node, and complete cross-domain drag.

[0097] In the embodiment of the present invention, the node attributes include attributes such as node label name, node subnodes, and node scope.

[0098] In detail, the real node refers to the Document Object Model (DOM).

[0099] In an embodiment of the present invention, the node attributes of the virtual node are generated according to the element information, and the real node is generated in real time according to the node attributes, including: extracting the element attributes of the dragged element from the element information, and using the element attributes as the node attributes of the virtual node; creating a virtual object of the virtual node according to the node attributes; and rendering the virtual object to obtain the real node.

[0100] Specifically, a virtual object of the virtual node may be created according to the node attributes through the createVNode method.

[0101] In detail, the virtual object may be rendered by using the baseCreateRenderer renderer of JavaScript to obtain the real node.

[0102] In detail, inserting the real node into the subdomain page includes: obtaining the node label of the virtual node; replacing the virtual node with the real node according to the node label; and adding the real node to the page list of the subdomain page.

[0103] Specifically, the node label of the virtual node can be obtained through the nodeName function.

[0104] In detail, the virtual node may be replaced with the real node according to the node label through the appendChild method.

[0105] Specifically, the subdomain page after the real node is inserted can be rendered through cancas, where the cancas is a graphical node used to draw the page.

[0106] In an embodiment of the present invention, a real node is generated in real time through the node attributes, the real node is inserted into the subdomain page, and the subdomain page after the real node is inserted is rendered. The dragged node can be rendered in real time, maintaining the function of the dragged element, and at the same time ensuring that the graphical node does not reuse instances, thereby improving the efficiency of cross-domain dragging.

[0107] The embodiment of the present invention obtains the element information of the dragged element through the drag instruction, and can accurately obtain the element information, which facilitates the subsequent insertion of the element information and the functions realized by the element information into the subdomain page. The main domain drag event corresponding to the drag instruction is rendered with the element information, and the main domain page and the subdomain page are determined, which facilitates data communication between the main domain page and the subdomain page. At the same time, the drag progress can be displayed to the user in real time through the drag animation in the main domain page. By using the cross-domain notification method to send the event information of the main domain drag event to the subdomain page, the data interaction between the main domain page and the subdomain page can be guaranteed, and cross-domain interaction can be realized. By using the virtual node to receive the element information , it can achieve the effect of dragging elements across domains without changing the data structure of the subdomain, and also improve the efficiency of cross-domain dragging. The subdomain drag event of the virtual node is triggered by the element information, and animation rendering is inserted into the subdomain page according to the subdomain drag event, which can realize drag insertion rendering without data drive, improve the performance of cross-domain dragging, ensure the smoothness of cross-domain dragging, and enhance user experience. The real node is generated in real time through the node attributes, and the real node is inserted into the subdomain page. The subdomain page after inserting the real node is rendered, and the drag node can be rendered in real time to maintain the function of the dragged element. At the same time, it is ensured that the graphical node will not reuse the instance, thereby improving the efficiency of cross-domain dragging. Therefore, the cross-domain dragging method based on the web page interface proposed by the present invention can solve the problem of low efficiency when performing cross-domain dragging of web pages.

[0108] like Figure 4 , which is a functional module diagram of a cross-domain dragging device based on a web page interface provided by an embodiment of the present invention.

[0109] The cross-domain dragging device 100 based on a web page interface of the present invention can be installed in a device. Depending on the functions implemented, the cross-domain dragging device 100 based on a web page interface can include an element information module 101, a drag animation module 102, an information transmission module 103, an insert animation module 104, and a page rendering module 105. The module of the present invention can also be referred to as a unit, which refers to a series of computer program segments that can be executed by a device processor and can perform fixed functions, which are stored in the memory of the device.

[0110] In this embodiment, the functions of each module / unit are as follows:

[0111] The element information module 101 is used to receive a user's drag instruction and obtain element information of the dragged element according to the drag instruction;

[0112] The drag animation module 102 is configured to render a drag animation for the main domain drag event corresponding to the drag instruction according to the element information, and determine the main domain page and the subdomain page according to the main domain drag event;

[0113] The information transmission module 103 is configured to send the event information of the main domain drag event to the subdomain page, and receive the element information according to the event information through the virtual node of the subdomain page;

[0114] The insertion animation module 104 is configured to trigger a subdomain drag event of the virtual node through the element information, and perform insertion animation rendering in the subdomain page according to the subdomain drag event;

[0115] The page rendering module 105 is used to generate node attributes of the virtual node according to the element information, generate a real node in real time according to the node attributes, insert the real node into the subdomain page, and render the subdomain page after the real node is inserted to complete cross-domain drag and drop.

[0116] In detail, each module described in the cross-domain dragging device 100 based on the web page interface in the embodiment of the present invention adopts the same method as above when in use. Figures 1 to 3 The cross-domain drag and drop method based on the web page interface described in the preceding text is the same technical means and can produce the same technical effects, so I will not go into details here.

[0117] like Figure 5 FIG. 1 is a schematic diagram of the structure of a device for implementing a cross-domain drag method based on a web page interface provided by an embodiment of the present invention.

[0118] The device 1 may include a processor 10, a memory 11, a communication bus 12, and a communication interface 13. It may also include a computer program stored in the memory 11 and executable on the processor 10, such as a cross-domain drag and drop program based on a web page interface.

[0119] In some embodiments, the processor 10 may be composed of an integrated circuit, for example, a single packaged integrated circuit, or a plurality of packaged integrated circuits with the same or different functions, including one or more central processing units (CPUs), microprocessors, digital processing chips, graphics processors, and a combination of various control chips. The processor 10 is the control core (Control Unit) of the device, connecting the various components of the entire device using various interfaces and lines, and executing the programs or modules stored in the memory 11 (for example, executing a cross-domain drag-and-drop program based on a web page interface, etc.), as well as calling the data stored in the memory 11, to execute various functions of the device and process data.

[0120] The memory 11 includes at least one type of readable storage medium, and the readable storage medium includes a flash memory, a mobile hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a magnetic memory, a disk, an optical disk, etc. In some embodiments, the memory 11 can be an internal storage unit of the device, such as a mobile hard disk of the device. In other embodiments, the memory 11 can also be an external storage device of the device, such as a plug-in mobile hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the device. Furthermore, the memory 11 can also include both an internal storage unit of the device and an external storage device. The memory 11 can not only be used to store application software and various types of data installed on the device, such as the code of a cross-domain drag-and-drop program based on a web page interface, but can also be used to temporarily store data that has been output or is to be output.

[0121] The communication bus 12 may be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. The bus is configured to enable communication between the memory 11 and at least one processor 10, etc.

[0122] The communication interface 13 is used for communication between the above-mentioned device and other devices, including a network interface and a user interface. Optionally, the network interface may include a wired interface and / or a wireless interface (such as a WI-FI interface, a Bluetooth interface, etc.), which is generally used to establish a communication connection between the device and other devices. The user interface may be a display (Display), an input unit (such as a keyboard (Keyboard)), optionally, the user interface may also be a standard wired interface, a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, and an OLED (Organic Light-Emitting Diode, organic light-emitting diode) touch device, etc. Among them, the display may also be appropriately referred to as a display screen or a display unit, which is used to display information processed in the device and to display a visual user interface.

[0123] The figure only shows a device with components. Those skilled in the art will understand that the structure shown in the figure does not constitute a limitation on the device, and may include fewer or more components than shown in the figure, or combine certain components, or arrange the components differently.

[0124] For example, although not shown, the device may further include a power source (such as a battery) for powering the various components. Preferably, the power source may be logically connected to the at least one processor 10 via a power management device, thereby implementing functions such as charge management, discharge management, and power consumption management through the power management device. The power source may further include any components such as one or more DC or AC power sources, a recharging device, a power failure detection circuit, a power converter or inverter, a power status indicator, etc. The device may also include various sensors, Bluetooth modules, Wi-Fi modules, etc., which will not be described in detail here.

[0125] It should be understood that the embodiment is for illustration only and the scope of the patent application is not limited to this structure.

[0126] The cross-domain drag and drop program based on the web page interface stored in the memory 11 of the device 1 is a combination of multiple instructions. When running in the processor 10, it can achieve the following:

[0127] Receive a drag command from the user, and obtain element information of the dragged element according to the drag command;

[0128] Performing drag animation rendering on the main domain drag event corresponding to the drag instruction according to the element information, and determining the main domain page and the subdomain page according to the main domain drag event;

[0129] Sending event information of the main domain drag event to the subdomain page, and receiving the element information according to the event information through the virtual node of the subdomain page;

[0130] Triggering a subdomain drag event of the virtual node through the element information, and inserting animation rendering into the subdomain page according to the subdomain drag event;

[0131] Generate node attributes of the virtual node according to the element information, generate a real node in real time according to the node attributes, insert the real node into the subdomain page, render the subdomain page after inserting the real node, and complete cross-domain dragging.

[0132] Specifically, the specific implementation method of the processor 10 for the above instructions can refer to the description of the relevant steps in the corresponding embodiment of the drawings, which will not be repeated here.

[0133] Furthermore, if the modules / units integrated in the device 1 are implemented as software functional units and sold or used as independent products, they can be stored in a storage medium. The storage medium can be volatile or non-volatile. For example, the storage medium can include: any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a mobile hard drive, a magnetic disk, an optical disk, a computer memory, or a read-only memory (ROM).

[0134] The present invention further provides a storage medium, wherein the readable storage medium stores a computer program, and when the computer program is executed by a processor of a device, the computer program can implement:

[0135] Receive a drag command from the user, and obtain element information of the dragged element according to the drag command;

[0136] Performing drag animation rendering on the main domain drag event corresponding to the drag instruction according to the element information, and determining the main domain page and the subdomain page according to the main domain drag event;

[0137] Sending event information of the main domain drag event to the subdomain page, and receiving the element information according to the event information through the virtual node of the subdomain page;

[0138] Triggering a subdomain drag event of the virtual node through the element information, and inserting animation rendering into the subdomain page according to the subdomain drag event;

[0139] Generate node attributes of the virtual node according to the element information, generate a real node in real time according to the node attributes, insert the real node into the subdomain page, render the subdomain page after inserting the real node, and complete cross-domain dragging.

[0140] In the several embodiments provided by the present invention, it should be understood that the disclosed devices, apparatuses, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the module division is merely a logical function division, and other division methods may be used in actual implementation.

[0141] The modules described as separate components may or may not be physically separate, and the components shown as modules may or may not be physical units, that is, they may be located in one place or distributed across multiple network elements. Some or all of the modules may be selected to achieve the purpose of the solution of this embodiment according to actual needs.

[0142] In addition, the functional modules in various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or hardware plus software functional modules.

[0143] It will be apparent to those skilled in the art that the present invention is not limited to the details of the exemplary embodiments described above, and that the present invention can be implemented in other specific forms without departing from the spirit or essential characteristics of the present invention.

[0144] Therefore, the embodiments should be considered in all respects as illustrative and non-restrictive, and the scope of the invention is defined by the appended claims rather than the foregoing description, and all changes that come within the meaning and range of equivalents of the claims are intended to be embraced therein. Any reference to a figure in a claim should not be construed as limiting the claim to which it relates.

[0145] Blockchain, as used in this article, refers to a novel application model for computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Blockchain is essentially a decentralized database, a series of data blocks generated using cryptographic methods. Each block contains information about a batch of online transactions, used to verify the validity of this information (to prevent counterfeiting) and generate the next block. Blockchain can include the underlying blockchain platform, the platform product service layer, and the application service layer.

[0146] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Artificial Intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to achieve optimal results.

[0147] Furthermore, it is clear that the word "comprising" does not exclude other units or steps, and the singular does not exclude the plural. Multiple units or devices recited in a system claim may also be implemented by a single unit or device through software or hardware. Terms such as "first" and "second" are used to indicate names and do not imply any particular order.

[0148] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not limiting. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present invention.

Claims

1. A cross-domain drag method based on a web page interface, characterized in that: The method comprises: Receive a drag command from the user, and obtain element information of the dragged element according to the drag command; Performing drag animation rendering on the main domain drag event corresponding to the drag instruction according to the element information, and determining the main domain page and the subdomain page according to the main domain drag event; Sending event information of the main domain drag event to the subdomain page, and receiving the element information according to the event information through the virtual node of the subdomain page; Triggering a subdomain drag event of the virtual node through the element information, and inserting animation rendering into the subdomain page according to the subdomain drag event; Generate node attributes of the virtual node according to the element information, generate a real node in real time according to the node attributes, insert the real node into the subdomain page, render the subdomain page after inserting the real node, and complete cross-domain drag and drop; The sending of the event information of the main domain drag event to the subdomain page, and receiving the element information according to the event information through the virtual node of the subdomain page, includes: using a preset cross-domain notification method to send the event information of the main domain drag event to the subdomain page; using the subdomain page to select the virtual node according to the event information, and sending the return information of the event information to the main domain page; using the main domain page to send the element information to the virtual node according to the return information; Generating node attributes of the virtual node according to the element information, and generating a real node in real time according to the node attributes, includes: extracting element attributes of the dragged element from the element information, and using the element attributes as node attributes of the virtual node; creating a virtual object of the virtual node according to the node attributes; and rendering the virtual object to obtain the real node; Inserting the real node into the subdomain page includes: obtaining the node label of the virtual node; replacing the virtual node with the real node according to the node label; and adding the real node to the page list of the subdomain page.

2. The cross-domain drag and drop method based on a web page interface according to claim 1, characterized in that: The acquiring element information of the dragged element according to the drag instruction includes: Determining the initial page position coordinates of the dragged element according to the drag instruction; Determining the element name of the dragged element according to the initial page position coordinates; The element information of the dragged element is obtained according to the element name.

3. The cross-domain drag and drop method based on a web page interface according to claim 1, characterized in that: The performing drag animation rendering on the main domain drag event corresponding to the drag instruction according to the element information includes: Identifying the element type of the dragged element according to the element information; Create a small drag image for the main domain drag event according to the element type; A drag animation of the main domain drag event is generated according to the small drag image and the drag instruction, and the drag animation rendering is completed.

4. The cross-domain drag and drop method based on a web page interface according to claim 2, characterized in that: The determining of the main domain page and the subdomain page according to the main domain drag event includes: The page corresponding to the initial page position coordinates is used as the main domain page; Obtaining a mouse displacement record from the main domain drag event; Calculating the ending page position coordinates based on the mouse displacement record and the initial page position coordinates; The page corresponding to the end page position coordinates is used as the subdomain page.

5. A cross-domain dragging device based on a web page interface, used to implement the cross-domain dragging method based on a web page interface according to any one of claims 1 to 4, characterized in that: The device comprises: An element information module is used to receive a user's drag command and obtain element information of the dragged element according to the drag command; a drag animation module, configured to render a drag animation for a main domain drag event corresponding to the drag instruction according to the element information, and determine a main domain page and a subdomain page according to the main domain drag event; An information transmission module, configured to send event information of the main domain drag event to the subdomain page, and receive the element information according to the event information through a virtual node of the subdomain page; An insertion animation module is used to trigger a subdomain drag event of the virtual node through the element information, and perform insertion animation rendering in the subdomain page according to the subdomain drag event; The page rendering module is used to generate node attributes of the virtual node according to the element information, generate a real node in real time according to the node attributes, insert the real node into the subdomain page, and render the subdomain page after inserting the real node to complete cross-domain dragging.

6. An electronic device, characterized in that: The device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, and when the computer program is executed by the at least one processor, the cross-domain drag method based on a web page interface according to any one of claims 1 to 4 is implemented.

7. A storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the cross-domain dragging method based on a web page interface as claimed in any one of claims 1 to 4 is implemented.

Images