CN115129415A - Cross-domain dragging method, device, equipment and storage medium based on webpage interface - Google Patents
Cross-domain dragging method, device, equipment and storage medium based on webpage interface Download PDFInfo
- Publication number
- CN115129415A CN115129415A CN202210855632.0A CN202210855632A CN115129415A CN 115129415 A CN115129415 A CN 115129415A CN 202210855632 A CN202210855632 A CN 202210855632A CN 115129415 A CN115129415 A CN 115129415A
- Authority
- CN
- China
- Prior art keywords
- dragging
- page
- domain
- node
- event
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention relates to an artificial intelligence technology, and discloses a cross-domain dragging method based on a webpage interface, which comprises the following steps: acquiring element information of a dragged element according to a dragging instruction of a user; performing dragging animation rendering on a main domain dragging event corresponding to the dragging instruction according to the element information, and determining a main domain page and a sub domain page; sending event information and element information of a main domain dragging event to a virtual node of a sub-domain page, triggering the sub-domain dragging event of the virtual node, and performing insertion animation rendering in the sub-domain page; and generating a real node corresponding to the virtual node according to the element information, inserting the real node into the sub-domain page, and rendering the page of the sub-domain page after the real node is inserted to finish cross-domain dragging. In addition, the invention also relates to a block chain technology, and the element information can be stored in the nodes of the block chain. The invention also provides a cross-domain dragging device, equipment and a storage medium based on the webpage interface. The method and the device can improve the efficiency of cross-domain dragging of the webpage.
Description
Technical Field
The invention relates to the technical field of artificial intelligence, in particular to a cross-domain dragging method, a device, equipment and a storage medium based on a webpage interface.
Background
With the advent of the digital era, more and more mechanisms have own web pages, and meanwhile, the functions of the web pages are more complex and diversified, wherein some web pages provide online editing functions, and module editing is performed by dragging elements in the web pages.
The existing webpage dragging technology is mostly based on the same webpage and the same domain dragging technology, for example, elements in the webpage are dragged and inserted based on sortable.
Disclosure of Invention
The invention provides a cross-domain dragging method, a device, equipment and a storage medium based on a webpage interface, and mainly aims to solve the problem of low efficiency in cross-domain dragging of a webpage.
In order to achieve the above object, the present invention provides a cross-domain dragging method based on a web interface, which includes:
receiving a dragging instruction of a user, and acquiring element information of a dragged element according to the dragging instruction;
performing dragging animation rendering on a main domain dragging event corresponding to the dragging instruction according to the element information, and determining a main domain page and a sub domain page according to the main domain dragging event;
sending event information of the main domain dragging event to the subdomain page, and receiving the element information through a virtual node of the subdomain page according to the event information;
triggering a sub-domain dragging event of the virtual node through the element information, and performing insertion animation rendering in the sub-domain page according to the sub-domain dragging event;
generating node attributes of the virtual nodes according to the element information, generating real nodes in real time according to the node attributes, inserting the real nodes into the subdomain pages, and rendering the subdomain pages inserted into the real nodes to finish cross-domain dragging.
Optionally, the obtaining element information of the dragged element according to the dragging instruction includes:
determining initial page position coordinates of the dragged element according to the dragging instruction;
determining the element name of the dragged element according to the initial page position coordinate;
and acquiring the element information of the dragged element according to the element name.
Optionally, the rendering of the drag animation of 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;
creating a small-sized dragging picture of the main domain dragging event according to the element type;
and generating a dragging animation of the main domain dragging event according to the small-sized dragging picture and the dragging instruction, and finishing the rendering of the dragging animation.
Optionally, the determining a main domain page and a sub-domain page according to the main domain drag event includes:
taking the page corresponding to the initial page position coordinate as the main domain page;
obtaining a mouse displacement record from the main domain dragging event;
calculating the position coordinate of an ending page according to the mouse displacement record and the position coordinate of the initial page;
and taking the page corresponding to the position coordinate of the ending page as the subdomain page.
Optionally, the sending the event information of the main domain drag event to the sub-domain page, and receiving the element information according to the event information by a virtual node of the sub-domain page includes:
sending event information of the main domain dragging event to the subdomain page by using a preset cross-domain notification method;
selecting the virtual node according to the event information by using the subdomain page, and sending return information of the event information to the main domain page;
and sending the element information to the virtual node by using the home domain page according to the return information.
Optionally, the generating a node attribute of the virtual node according to the element information, and generating a real node in real time according to the node attribute include:
extracting the element attribute of the dragged element from the element information, and taking the element attribute as the node attribute of the virtual node;
creating a virtual object of the virtual node according to the node attribute;
rendering the virtual object to obtain the real node.
Optionally, the inserting the real node into the sub-domain page includes:
acquiring a node label of the virtual node;
replacing the virtual node with the real node according to the node label;
and adding the real node into a page list of the subdomain page.
In order to solve the above problem, the present invention further provides a cross-domain dragging device based on a web interface, where the device includes:
the element information module is used for receiving a dragging instruction of a user and acquiring element information of a dragged element according to the dragging instruction;
the dragging animation module is used for performing dragging animation rendering on a main domain dragging event corresponding to the dragging instruction according to the element information, and determining a main domain page and a sub domain page according to the main domain dragging event;
the information transmission module is used for sending the event information of the main domain dragging event to the subdomain page and receiving the element information according to the event information through the virtual node of the subdomain page;
the inserting animation module is used for triggering a subdomain dragging event of the virtual node through the element information and performing inserting animation rendering in the subdomain page according to the subdomain dragging event;
and the page rendering module is used for generating the node attribute of the virtual node according to the element information, generating a real node in real time according to the node attribute, inserting the real node into the subdomain page, and rendering the subdomain page inserted into the real node to finish cross-domain dragging.
In order to solve the above problem, the present invention also provides an apparatus comprising:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein, the first and the second end of the pipe are connected with each other,
the memory stores a computer program executable by the at least one processor, the computer program being executable by the at least one processor to enable the at least one processor to perform the web interface-based cross-domain drag method described above.
In order to solve the above problem, the present invention further provides a storage medium, where at least one computer program is stored, and the at least one computer program is executed by a processor in a device to implement the above method for dragging across domains based on a web interface.
The embodiment of the invention can accurately acquire the element information of the dragged element through the dragging instruction, is convenient for integrally inserting the element information and the function realized by the element information into a sub-domain page in the follow-up process, can determine the main domain page and the sub-domain page by dragging and rendering the main domain dragging event corresponding to the dragging instruction through the element information, is convenient for data communication between the main domain page and the sub-domain page, can simultaneously display the dragging progress to a user in real time through the dragging and rendering animation in the main domain page, can ensure the data interaction between the main domain page and the sub-domain page by sending the event information of the main domain dragging event to the sub-domain page by using a cross-domain notification method, realizes the cross-domain interaction, can receive the element information by using the virtual node, and can ensure the data interaction between the main domain page and the sub-domain page without changing the data structure of the sub-domain, the effect of dragging elements across domains is achieved, the efficiency of dragging across domains is improved, a subdomain dragging event of a virtual node is triggered through element information, animation rendering is inserted into a subdomain page according to the subdomain dragging event, data-driven dragging inserting rendering without data can be achieved, the performance of dragging across domains is improved, the smoothness of dragging across domains is guaranteed, user experience is improved, real nodes are generated in real time through node attributes, the real nodes are inserted into the subdomain page, page rendering is carried out on the subdomain page after the real nodes are inserted, the dragging nodes can be rendered in real time, the functions of the dragged elements are maintained, the graphical nodes are guaranteed not to reuse instances, and therefore the efficiency of dragging across domains is improved. Therefore, the cross-domain dragging method, device, equipment and storage medium based on the webpage interface can solve the problem of low efficiency when the webpage is dragged in a cross-domain mode.
Drawings
Fig. 1 is a schematic flowchart of a cross-domain dragging method based on a web interface according to an embodiment of the present invention;
fig. 2 is a schematic flow chart of acquiring element information according to an embodiment of the present invention;
FIG. 3 is a flowchart illustrating a process of determining a home domain page and a sub-domain page according to an embodiment of the present invention;
FIG. 4 is a functional block diagram of a cross-domain dragging device based on a web interface according to an embodiment of the present invention;
fig. 5 is a schematic structural diagram of a device for implementing the cross-domain dragging method based on a web interface according to an embodiment of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The embodiment of the application provides a cross-domain dragging method based on a webpage interface. The execution subject of the cross-domain dragging method based on the web interface includes, but is not limited to, at least one of a server, a terminal and the like which can be configured to execute the method provided by the embodiment of the present application. In other words, the cross-domain dragging method based on the web interface may be executed by software or hardware installed in the terminal device or the server device, and the software may be a block chain platform. The server includes but is not limited to: a single server, a server cluster, a cloud server or a cloud server cluster, and the like. The server may be an independent server, or may be a cloud server that provides basic cloud computing services such as a cloud service, a cloud database, cloud computing, a cloud function, cloud storage, a Network service, cloud communication, a middleware service, a domain name service, a security service, a Content Delivery Network (CDN), a big data and artificial intelligence platform, and the like.
Referring to fig. 1, a schematic flow chart of a cross-domain dragging method based on a web interface according to an embodiment of the present invention is shown. In this embodiment, the cross-domain dragging method based on the web interface includes:
s1, receiving a dragging instruction of a user, and acquiring element information of a dragged element according to the dragging instruction;
in this embodiment of the present invention, the drag instruction may be a mouse drag instruction.
In detail, the element information may be information such as an attribute of an element, a value of an element, and the like stored in a storage device such as a database, a block chain, and the like.
In the embodiment of the present invention, referring to fig. 2, the obtaining element information of a dragged element according to the dragging instruction includes:
s21, determining the initial page position coordinates of the dragged element according to the dragging instruction;
s22, determining the element name of the dragged element according to the initial page position coordinate;
and S23, acquiring the element information of the dragged element according to the element name.
In detail, the initial page position coordinate when the mouse clicks is recorded by the drag instruction through a click event, and the initial page position coordinate when the mouse clicks is the initial page position coordinate of the dragged element.
Specifically, the element name of the dragged element may be determined according to the initial page position coordinate through a document. And y is the vertical coordinate of the initial page position coordinate.
In detail, the element information of the dragged element can be obtained according to the element name through a getElementById function of JavaScript.
In the embodiment of the invention, the element information of the dragged element is obtained through the dragging instruction, so that the element information can be accurately obtained, and the element information and the function realized by the element information can be conveniently and integrally inserted into the sub-domain page in the follow-up process.
S2, performing dragging animation rendering on a main domain dragging event corresponding to the dragging instruction according to the element information, and determining a main domain page and a sub-domain page according to the main domain dragging event;
in the embodiment of the invention, the main domain dragging event refers to an HTML event recorded from mouse clicking, mouse dragging element to mouse releasing, the HTML event refers to a thing occurring on the HTML element, and when JavaScript is used in an HTML page, the JavaScript can trigger the events.
In an embodiment of the present invention, the rendering, according to the element information, a drag animation of a main domain drag event corresponding to the drag instruction includes: identifying the element type of the dragged element according to the element information; creating a small-sized dragging picture of the main domain dragging event according to the element type; and generating a drag animation of the main domain drag event according to the small-sized drag picture and the drag instruction, and finishing drag animation rendering.
In detail, the element type of the dragged element may be identified according to a suffix name of an element file name in the element information.
Specifically, the small-sized drag picture may be created according to the element type through a new Image function.
In detail, a datatransfer setdragimage function may be utilized to generate a drag animation of the main domain drag event according to the small-sized drag picture and the drag instruction.
In detail, the home domain page refers to a page where the dragged element is originally located, and the home domain page may be an HTML page or a JavaScript page.
Specifically, the subdomain page refers to a page where the dragged element is located last, the subdomain page is a sub-page of the main domain page, and the subdomain page may be a frame (iframe) tag in an HTML page.
In the embodiment of the present invention, referring to fig. 3, the determining a main domain page and a sub-domain page according to the main domain drag event includes:
s31, taking the page corresponding to the initial page position coordinate as the home domain page;
s32, obtaining a mouse displacement record from the main domain dragging event;
s33, calculating the position coordinate of the ending page according to the mouse displacement record and the position coordinate of the initial page;
and S34, taking the page corresponding to the ending page position coordinate as the subdomain page.
In detail, the coordinate of the page position pressed by the mouse can be recorded by the mouseReleased method of the main domain dragging event, the coordinate of the page position released by the mouse can be recorded by the mouseReleased method of the main domain dragging event, and the mouse displacement record can be obtained by subtracting the coordinate of the page position pressed by the mouse from the coordinate of the page position released by the mouse.
Specifically, the mouse displacement record may be added to the initial page position coordinate to obtain an end page position coordinate.
In the embodiment of the invention, the element information is used for rendering the drag animation of the main domain drag event corresponding to the drag instruction, so that a main domain page and a sub domain page can be determined, the data communication between the main domain page and the sub domain page is facilitated, and the drag progress can be displayed to a user in real time through the drag animation in the main domain page.
S3, sending the event information of the main domain dragging event to the subdomain page, and receiving the element information according to the event information through the virtual node of the subdomain page;
in the embodiment of the present invention, the event information refers to parameter information of a drag event, for example, the initial page position coordinate and the end page position coordinate.
In detail, the virtual node may be a virtual DOM, the virtual DOM is hidden by default, and the content in the virtual DOM defaults to a null value.
In this embodiment of the present invention, the sending the event information of the main domain drag event to the sub-domain page, and receiving the element information according to the event information by using the virtual node of the sub-domain page includes: sending event information of the main domain dragging event to the subdomain page by using a preset cross-domain notification method; selecting the virtual node according to the event information by using the subdomain page, and sending return information of the event information to the main domain page; and sending the element information to the virtual node by using the home domain page according to the return information.
In detail, the cross-domain notification method may be a postmessage method that allows a script from one document to pass a text message to a script in another document, regardless of whether the cross-domain, script in one document, or other document cannot call methods and read properties, but they can use this messaging technique to achieve secure communication.
Specifically, the return information is information for confirming reception, including the node address of the virtual node, whether reception preparation is completed, and the like.
In the embodiment of the invention, the event information of the main domain dragging event is sent to the sub-domain page by using a cross-domain notification method, so that data interaction between the main domain page and the sub-domain page can be ensured, cross-domain interaction is realized, the element information is received by using the virtual node, the effect of element cross-domain dragging can be realized on the basis of not changing the data structure of the sub-domain, and the efficiency of cross-domain dragging is also improved.
S4, triggering a sub-domain dragging event of the virtual node through the element information, and performing insertion animation rendering in the sub-domain page according to the sub-domain dragging event;
in the embodiment of the invention, the subdomain dragging event refers to an HTML event recorded from the time when a mouse reaches the boundary of the subdomain page to the time when the mouse is released.
In detail, a subdomain dragging event of the virtual node can be triggered according to the element information through JavaScript.
In this embodiment of the present invention, the method for rendering the insertion animation in the sub-domain page according to the sub-domain drag event is consistent with the method for rendering the drag animation in the step S2, where the method for rendering the drag animation is performed on the main domain drag event corresponding to the drag instruction according to the element information, and details are not repeated here.
In the embodiment of the invention, the sub-domain dragging event of the virtual node is triggered through the element information, and the insertion animation rendering is carried out in the sub-domain page according to the sub-domain dragging event, so that the data-driven dragging insertion rendering can be realized, the performance of cross-domain dragging is improved, the smoothness of cross-domain dragging is ensured, and the user experience is improved.
S5, generating a node attribute of the virtual node according to the element information, generating a real node in real time according to the node attribute, inserting the real node into the subdomain page, and performing page rendering on the subdomain page inserted into the real node to complete cross-domain dragging.
In the embodiment of the invention, the node attributes comprise node tag names, node child nodes, node scope and other attributes.
In detail, the real node refers to a Document Object Model (DOM).
In this embodiment of the present invention, the generating a node attribute of the virtual node according to the element information and generating a real node in real time according to the node attribute includes: extracting the element attribute of the dragged element from the element information, and taking the element attribute as the node attribute of the virtual node; creating a virtual object of the virtual node according to the node attribute; rendering the virtual object to obtain the real node.
Specifically, a virtual object of the virtual node may be created according to the node attribute by a createwnode method.
In detail, the virtual object may be rendered by a basecreaterender renderer of JavaScript, so as to obtain the real node.
In detail, the inserting the real node into the subdomain page includes: acquiring a node label of the virtual node; replacing the virtual node with the real node according to the node label; and adding the real node into a page list of the subdomain page.
Specifically, the node label of the virtual node may be obtained through a nodeName function.
In detail, the virtual node may be replaced with the real node according to the node tag by an appndchild method.
Specifically, the page rendering may be performed on the sub-domain page inserted into the real node through a cancas, where the cancas is a graphical node used for drawing a page.
In the embodiment of the invention, the real node is generated in real time through the node attribute, the real node is inserted into the subdomain page, and the subdomain page inserted into the real node is subjected to page rendering, so that the dragging node can be rendered in real time, the function of the dragged element is maintained, and meanwhile, the graphical node is ensured not to reuse the instance, thereby improving the efficiency of cross-domain dragging.
The embodiment of the invention can accurately acquire the element information of the dragged element through the dragging instruction, is convenient for integrally inserting the element information and the function realized by the element information into the sub-domain page, can determine the main domain page and the sub-domain page by dragging and animation rendering the main domain dragging event corresponding to the dragging instruction through the element information, is convenient for data communication between the main domain page and the sub-domain page, can display the dragging progress to a user in real time through the dragging animation in the main domain page, can ensure data interaction between the main domain page and the sub-domain page by sending the event information of the main domain dragging event to the sub-domain page by using a cross-domain notification method, realizes cross-domain interaction, can receive the element information by using the virtual node, and can realize the data structure of the sub-domain without changing, the effect of dragging elements across domains is achieved, the efficiency of dragging across domains is improved, a subdomain dragging event of a virtual node is triggered through element information, animation rendering is inserted into a subdomain page according to the subdomain dragging event, data-driven dragging inserting rendering without data can be achieved, the performance of dragging across domains is improved, the smoothness of dragging across domains is guaranteed, user experience is improved, real nodes are generated in real time through node attributes, the real nodes are inserted into the subdomain page, page rendering is carried out on the subdomain page after the real nodes are inserted, the dragging nodes can be rendered in real time, the functions of the dragged elements are maintained, the graphical nodes are guaranteed not to reuse instances, and therefore the efficiency of dragging across domains is improved. Therefore, the cross-domain dragging method based on the webpage interface can solve the problem of low efficiency when the webpage is dragged in a cross-domain mode.
Fig. 4 is a functional block diagram of a cross-domain dragging device based on a web interface according to an embodiment of the present invention.
The cross-domain dragging device 100 based on the web interface can be installed in equipment. According to the realized functions, the webpage interface-based cross-domain dragging device 100 can comprise an element information module 101, a dragging animation module 102, an information transfer module 103, an insertion animation module 104 and a page rendering module 105. The modules of the invention, which may also be referred to as units, are a series of computer program segments capable of being executed by a processor of a device and performing fixed functions, and are stored in a memory of the device.
In the present embodiment, the functions of the respective modules/units are as follows:
the element information module 101 is configured to receive a drag instruction of a user, and acquire element information of a dragged element according to the drag instruction;
the drag animation module 102 is configured to perform drag animation rendering on a main domain drag event corresponding to the drag instruction according to the element information, and determine a main domain page and a sub-domain page according to the main domain drag event;
the information transfer module 103 is configured to send event information of the main domain dragging event to the sub-domain page, and receive the element information according to the event information through a virtual node of the sub-domain page;
the animation insertion module 104 is configured to trigger a sub-domain drag event of the virtual node through the element information, and perform animation insertion rendering in the sub-domain page according to the sub-domain drag event;
the page rendering module 105 is configured to generate a node attribute of the virtual node according to the element information, generate a real node in real time according to the node attribute, insert the real node into the sub-domain page, and perform page rendering on the sub-domain page inserted into the real node, thereby completing cross-domain dragging.
In detail, when the modules in the webpage interface-based cross-domain dragging device 100 according to the embodiment of the present invention are used, the same technical means as the webpage interface-based cross-domain dragging method described in fig. 1 to 3 are adopted, and the same technical effects can be produced, which is not described herein again.
Fig. 5 is a schematic structural diagram of a device for implementing a cross-domain drag method based on a web interface according to an embodiment of the present invention.
The device 1 may include a processor 10, a memory 11, a communication bus 12, and a communication interface 13, and may further include a computer program stored in the memory 11 and executable on the processor 10, such as a cross-domain drag program based on a web interface.
In some embodiments, the processor 10 may be composed of an integrated circuit, for example, a single packaged integrated circuit, or may be composed of a plurality of integrated circuits packaged with the same function or different functions, and includes one or more Central Processing Units (CPUs), a microprocessor, a digital Processing chip, a graphics processor, a combination of various control chips, and the like. The processor 10 is a Control Unit (Control Unit) of the device, connects various components of the whole device by using various interfaces and lines, executes or executes programs or modules stored in the memory 11 (for example, executes a cross-domain drag program based on a web interface, and the like), and calls data stored in the memory 11 to execute various functions of the device and process data.
The memory 11 includes at least one type of readable storage medium including flash memory, removable hard disks, multimedia cards, card-type memory (e.g., SD or DX memory, etc.), magnetic memory, magnetic disks, optical disks, and the like. The memory 11 may in some embodiments be an internal storage unit of the device, for example a removable hard disk of the device. The memory 11 may also be an external storage device of the device in other embodiments, such as a plug-in removable hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), etc. provided on the device. Further, the memory 11 may also include both an internal storage unit of the device and an external storage device. The memory 11 may be used to store not only application software installed in the device and various data, such as code of a cross-domain drag program based on a web interface, but also temporarily store data that has been output or is to be output.
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 arranged to enable connection communication between the memory 11 and at least one processor 10 or the like.
The communication interface 13 is used for communication between the above-mentioned device and other devices, and includes a network interface and a user interface. Optionally, the network interface may include a wired interface and/or a wireless interface (e.g., WI-FI interface, bluetooth interface, etc.) that is commonly 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), and optionally a standard wired interface, a wireless interface. Alternatively, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, or the like. The display, which may also be referred to as a display screen or display unit, is suitable for displaying information processed in the device and for displaying a visualized user interface.
Only devices having components are shown, it will be understood by those skilled in the art that the structures shown in the figures do not constitute limitations on the devices, and may include fewer or more components than shown, or some components in combination, or a different arrangement of components.
For example, although not shown, the apparatus may further include a power supply (such as a battery) for supplying power to each component, and preferably, the power supply may be logically connected to the at least one processor 10 through a power management device, so that functions such as charge management, discharge management, and power consumption management are implemented through the power management device. The power supply may also include any component of one or more dc or ac power sources, recharging devices, power failure detection circuitry, power converters or inverters, power status indicators, and the like. The device may further include various sensors, a bluetooth module, a Wi-Fi module, etc., which are not described herein again.
It is to be understood that the embodiments described are illustrative only and are not to be construed as limiting the scope of the claims.
The memory 11 of the device 1 stores a web interface-based cross-domain drag program, which is a combination of a plurality of instructions that, when executed in the processor 10, can implement:
receiving a dragging instruction of a user, and acquiring element information of a dragged element according to the dragging instruction;
performing dragging animation rendering on a main domain dragging event corresponding to the dragging instruction according to the element information, and determining a main domain page and a sub-domain page according to the main domain dragging event;
sending event information of the main domain dragging event to the subdomain page, and receiving the element information through a virtual node of the subdomain page according to the event information;
triggering a sub-domain dragging event of the virtual node through the element information, and performing insertion animation rendering in the sub-domain page according to the sub-domain dragging event;
generating node attributes of the virtual nodes according to the element information, generating real nodes in real time according to the node attributes, inserting the real nodes into the subdomain pages, and rendering the subdomain pages inserted into the real nodes to finish cross-domain dragging.
Specifically, the specific implementation method of the instruction by the processor 10 may refer to the description of the relevant steps in the embodiment corresponding to the drawings, which is not described herein again.
Further, the integrated modules/units of the device 1 may be stored in a storage medium if implemented in the form of software functional units and sold or used as separate products. The storage medium may be volatile or non-volatile. For example, the storage medium may include: any entity or device capable of carrying said computer program code, recording medium, U-disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM).
The invention also provides a storage medium, the readable storage medium storing a computer program which, when executed by a processor of a device, may implement:
receiving a dragging instruction of a user, and acquiring element information of a dragged element according to the dragging instruction;
performing dragging animation rendering on a main domain dragging event corresponding to the dragging instruction according to the element information, and determining a main domain page and a sub-domain page according to the main domain dragging event;
sending event information of the main domain dragging event to the subdomain page, and receiving the element information through a virtual node of the subdomain page according to the event information;
triggering a sub-domain dragging event of the virtual node through the element information, and performing insertion animation rendering in the sub-domain page according to the sub-domain dragging event;
generating node attributes of the virtual nodes according to the element information, generating real nodes in real time according to the node attributes, inserting the real nodes into the subdomain pages, and rendering the subdomain pages inserted into the real nodes to finish cross-domain dragging.
In the several embodiments provided in the present invention, it should be understood that the disclosed apparatus, device and method may be implemented in other manners. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the modules is only one logical functional division, and other divisions may be realized in practice.
The modules described as separate parts may or may not be physically separate, and parts displayed as modules may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment.
In addition, functional modules in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional module.
It will be evident to those skilled in the art that the invention is not limited to the details of the foregoing illustrative embodiments, and that the present invention may be embodied in other specific forms without departing from the spirit or essential attributes thereof.
The present embodiments are therefore to be considered in all respects as illustrative and not restrictive, the scope of the invention being indicated by the appended claims rather than by the foregoing description, and all changes which come within the meaning and range of equivalency of the claims are therefore intended to be embraced therein. Any reference signs in the claims shall not be construed as limiting the claim concerned.
The block chain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.
The embodiment of the application can acquire and process related data based on an artificial intelligence technology. Among them, Artificial Intelligence (AI) is a theory, method, technique and application system that simulates, extends and expands human Intelligence using a digital computer or a machine controlled by a digital computer, senses the environment, acquires knowledge and uses the knowledge to obtain the best result.
Furthermore, it is obvious that the word "comprising" does not exclude other elements or steps, and the singular does not exclude the plural. A plurality of units or means recited in the system claims may also be implemented by one unit or means in software or hardware. The terms first, second, etc. are used to denote names, but not any particular order.
Finally, it should be noted that the above embodiments are only intended to illustrate the technical solutions of the present invention and not to limit the same, and although the present invention is described in detail with reference to the preferred embodiments, it should be understood by those skilled in the art that modifications or equivalent substitutions can be made to the technical solutions of the present invention without departing from the spirit and scope of the technical solutions of the present invention.
Claims (10)
1. A cross-domain dragging method based on a webpage interface is characterized by comprising the following steps:
receiving a dragging instruction of a user, and acquiring element information of a dragged element according to the dragging instruction;
performing dragging animation rendering on a main domain dragging event corresponding to the dragging instruction according to the element information, and determining a main domain page and a sub-domain page according to the main domain dragging event;
sending event information of the main domain dragging event to the subdomain page, and receiving the element information through a virtual node of the subdomain page according to the event information;
triggering a sub-domain dragging event of the virtual node through the element information, and performing insertion animation rendering in the sub-domain page according to the sub-domain dragging event;
generating node attributes of the virtual nodes according to the element information, generating real nodes in real time according to the node attributes, inserting the real nodes into the subdomain pages, and rendering the subdomain pages inserted into the real nodes to finish cross-domain dragging.
2. The cross-domain dragging method based on the web interface according to claim 1, wherein the obtaining element information of the dragged element according to the dragging instruction comprises:
determining initial page position coordinates of the dragged element according to the dragging instruction;
determining the element name of the dragged element according to the initial page position coordinate;
and acquiring the element information of the dragged element according to the element name.
3. The cross-domain dragging method based on the web interface of claim 1, wherein the rendering of the dragging animation of the main domain dragging event corresponding to the dragging instruction according to the element information comprises:
identifying the element type of the dragged element according to the element information;
creating a small-sized dragging picture of the main domain dragging event according to the element type;
and generating a dragging animation of the main domain dragging event according to the small-sized dragging picture and the dragging instruction, and finishing the rendering of the dragging animation.
4. The method for cross-domain dragging based on a web interface of claim 2, wherein the determining a main domain page and a sub-domain page according to the main domain dragging event comprises:
taking the page corresponding to the initial page position coordinate as the home domain page;
obtaining a mouse displacement record from the main domain dragging event;
calculating the position coordinate of an ending page according to the mouse displacement record and the position coordinate of the initial page;
and taking the page corresponding to the position coordinate of the ending page as the subdomain page.
5. The method for cross-domain dragging based on a web interface of claim 1, wherein the sending the event information of the main domain dragging event to the subdomain page and the receiving the element information according to the event information by the virtual node of the subdomain page comprises:
sending event information of the main domain dragging event to the subdomain page by using a preset cross-domain notification method;
selecting the virtual node according to the event information by using the subdomain page, and sending return information of the event information to the main domain page;
and sending the element information to the virtual node by using the home domain page according to the return information.
6. The web interface-based cross-domain dragging method according to claim 1, wherein the generating of the node attribute of the virtual node according to the element information and the real node according to the node attribute in real time comprises:
extracting element attributes of the dragged elements from the element information, and taking the element attributes as node attributes of the virtual nodes;
creating a virtual object of the virtual node according to the node attribute;
rendering the virtual object to obtain the real node.
7. The web-based interface cross-domain drag method of any one of claims 1-6, wherein the inserting the real node into the subdomain page comprises:
acquiring a node label of the virtual node;
replacing the virtual node with the real node according to the node label;
and adding the real node into a page list of the subdomain page.
8. A cross-domain dragging device based on a webpage interface is characterized by comprising:
the element information module is used for receiving a dragging instruction of a user and acquiring element information of a dragged element according to the dragging instruction;
the dragging animation module is used for performing dragging animation rendering on a main domain dragging event corresponding to the dragging instruction according to the element information, and determining a main domain page and a sub domain page according to the main domain dragging event;
the information transmission module is used for sending the event information of the main domain dragging event to the subdomain page and receiving the element information according to the event information through the virtual node of the subdomain page;
the inserting animation module is used for triggering a subdomain dragging event of the virtual node through the element information and performing inserting animation rendering in the subdomain page according to the subdomain dragging event;
and the page rendering module is used for generating the node attribute of the virtual node according to the element information, generating a real node in real time according to the node attribute, inserting the real node into the subdomain page, and rendering the subdomain page inserted into the real node to finish cross-domain dragging.
9. An apparatus, characterized in that the apparatus comprises:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform the web-based interface cross-domain drag method of any one of claims 1 to 7.
10. A storage medium storing a computer program, wherein the computer program, when executed by a processor, implements the method of dragging across domains based on a web interface according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210855632.0A CN115129415A (en) | 2022-07-20 | 2022-07-20 | Cross-domain dragging method, device, equipment and storage medium based on webpage interface |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210855632.0A CN115129415A (en) | 2022-07-20 | 2022-07-20 | Cross-domain dragging method, device, equipment and storage medium based on webpage interface |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115129415A true CN115129415A (en) | 2022-09-30 |
Family
ID=83383769
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210855632.0A Pending CN115129415A (en) | 2022-07-20 | 2022-07-20 | Cross-domain dragging method, device, equipment and storage medium based on webpage interface |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115129415A (en) |
-
2022
- 2022-07-20 CN CN202210855632.0A patent/CN115129415A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114020256A (en) | Front-end page generation method, device and equipment and readable storage medium | |
| CN112559355A (en) | Test case generation method and device, electronic equipment and storage medium | |
| CN112486490B (en) | Front-end code packaging method and device, electronic equipment and storage medium | |
| CN114185776A (en) | Big data point burying method, device, equipment and medium for application program | |
| CN114169303A (en) | Method, device, equipment and medium for editing table based on vue.js | |
| CN112650993A (en) | Screen watermark display method and device, electronic equipment and storage medium | |
| CN112527280A (en) | Interface display method and device, server and readable storage medium | |
| CN113032275A (en) | Method and device for testing field, electronic equipment and storage medium | |
| CN115129415A (en) | Cross-domain dragging method, device, equipment and storage medium based on webpage interface | |
| CN115827115A (en) | H5 page jump method, device, equipment and storage medium of WeChat applet | |
| CN114398282A (en) | Test script generation method, device, equipment and storage medium | |
| CN109582411A (en) | Graphical user interface creating method, device, computer equipment and storage medium | |
| CN113010129A (en) | Virtual studio full-flow multi-terminal blackboard writing extraction method and device | |
| CN114461531A (en) | Platform adaptability test method, device, equipment and storage medium of test case | |
| CN114186540A (en) | Mail content intelligent filling method and device, electronic equipment and storage medium | |
| CN113656041A (en) | Data processing method, device, equipment and storage medium | |
| CN114357337A (en) | Cache management method, device, equipment and storage medium | |
| CN112051952A (en) | Picture dynamic browsing method and device, electronic equipment and readable storage medium | |
| CN114357534B (en) | Classroom training platform construction method, device, equipment and medium based on block chain | |
| CN114610305B (en) | Invisible webpage resource development method and device, electronic equipment and medium | |
| CN115099200B (en) | Tamper-proof text processing method and device and computer equipment | |
| CN114860600B (en) | Visual data embedded point method, device, equipment and storage medium | |
| CN115344372A (en) | Cell layout method, device and equipment for sliding view and storage medium | |
| CN114490087A (en) | Method and device for acquiring available time of server cluster, electronic equipment and medium | |
| CN115061765A (en) | Message card ejection method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |