CN114115681A - Page generation method and device, electronic equipment and medium - Google Patents

Page generation method and device, electronic equipment and medium Download PDF

Info

Publication number
CN114115681A
CN114115681A CN202111458856.XA CN202111458856A CN114115681A CN 114115681 A CN114115681 A CN 114115681A CN 202111458856 A CN202111458856 A CN 202111458856A CN 114115681 A CN114115681 A CN 114115681A
Authority
CN
China
Prior art keywords
component
target
draggable
event
container
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.)
Granted
Application number
CN202111458856.XA
Other languages
Chinese (zh)
Other versions
CN114115681B (en
Inventor
余鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Baidu Netcom Science and Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN202111458856.XA priority Critical patent/CN114115681B/en
Priority claimed from CN202111458856.XA external-priority patent/CN114115681B/en
Publication of CN114115681A publication Critical patent/CN114115681A/en
Application granted granted Critical
Publication of CN114115681B publication Critical patent/CN114115681B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • 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
    • 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/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • 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/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • 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
    • 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/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45533—Hypervisors; Virtual machine monitors
    • G06F9/45558—Hypervisor-specific management and integration aspects

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The disclosure provides a page generation method and device, electronic equipment and a medium, and relates to the technical field of computers, in particular to the technical field of cloud service and interface interaction. The implementation scheme is as follows: displaying a first page, the first page including at least one draggable component and at least one container component for housing the at least one draggable component; updating dragging state information of a target draggable component in response to detecting that the starting dragging event occurs to the target draggable component; in response to detecting that the accommodation event occurs to a target container assembly, updating accommodation state information of the target container assembly; and in response to detecting that the target draggable component generates the end dragging event, updating the first page based on the dragging state information and the accommodating state information to generate a second page.

Description

Page generation method and device, electronic equipment and medium
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to the field of cloud services and interface interaction technologies, and in particular, to a page generation method and apparatus, an electronic device, a computer-readable storage medium, and a computer program product.
Background
In some application scenarios, a user may drag a component in a page. For example, in a questionnaire page, a user may drag multiple answer choices to achieve a ranking of the answer choices. For another example, in a picture editing page, the user may drag an unwanted picture to a trash box to delete the picture.
The approaches described in this section are not necessarily approaches that have been previously conceived or pursued. Unless otherwise indicated, it should not be assumed that any of the approaches described in this section qualify as prior art merely by virtue of their inclusion in this section. Similarly, unless otherwise indicated, the problems mentioned in this section should not be considered as having been acknowledged in any prior art.
Disclosure of Invention
The disclosure provides a page generation method and device, an electronic device, a computer readable storage medium and a computer program product.
According to an aspect of the present disclosure, there is provided a page generation method, including: displaying a first page, wherein the first page comprises at least one draggable component and at least one container component for accommodating the at least one draggable component, each draggable component is bound with a start dragging event and an end dragging event, and each container component is bound with an accommodating event; updating dragging state information of a target draggable component in response to detecting that the starting dragging event occurs to the target draggable component, wherein the target draggable component is any one of the at least one draggable component; in response to detecting that the accommodation event occurs to a target container assembly, updating accommodation state information of the target container assembly, wherein the target container assembly is any one of the at least one container assembly; and in response to detecting that the target draggable component generates the end dragging event, updating the first page based on the dragging state information and the accommodating state information to generate a second page.
According to an aspect of the present disclosure, there is provided a page generating apparatus including: a first display module configured to display a first page, the first page including at least one draggable component and at least one container component for accommodating the at least one draggable component, each draggable component having a start drag event and an end drag event bound thereto, each container component having an accommodation event bound thereto; a first state updating module configured to update dragging state information of a target draggable component in response to detecting that the start dragging event occurs for the target draggable component, wherein the target draggable component is any one of the at least one draggable component; a second state updating module configured to update the accommodation state information of a target container component in response to detecting that the accommodation event occurs to the target container component; and a second display module configured to update the first page based on the drag status information and the accommodation status information to generate a second page in response to detecting that the end drag event occurs to the target draggable component.
According to an aspect of the present disclosure, there is provided an electronic device including: at least one processor; and a memory communicatively coupled to the at least one processor, the memory storing instructions executable by the at least one processor to enable the at least one processor to perform the method.
According to an aspect of the present disclosure, there is provided a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the above-described method.
According to an aspect of the disclosure, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the above-described method.
According to one or more embodiments of the present disclosure, generation efficiency of a page having a component drag function can be improved.
It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present disclosure, nor do they limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate exemplary embodiments of the embodiments and, together with the description, serve to explain the exemplary implementations of the embodiments. The illustrated embodiments are for purposes of illustration only and do not limit the scope of the claims. Throughout the drawings, identical reference numbers designate similar, but not necessarily identical, elements.
FIG. 1 shows a flow diagram of a page generation method according to an embodiment of the present disclosure;
FIG. 2 illustrates a schematic diagram of a start drag event, an end drag event, and a containment event according to an embodiment of the present disclosure;
3A-3D are schematic diagrams illustrating display effects of a target draggable component, a candidate container component, a target container component, according to embodiments of the present disclosure;
FIG. 4 shows a block diagram of a page generation apparatus according to an embodiment of the present disclosure; and
FIG. 5 illustrates a block diagram of an exemplary electronic device that can be used to implement embodiments of the present disclosure.
Detailed Description
Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
In the present disclosure, unless otherwise specified, the use of the terms "first", "second", etc. to describe various elements is not intended to limit the positional relationship, the timing relationship, or the importance relationship of the elements, and such terms are used only to distinguish one element from another. In some examples, a first element and a second element may refer to the same instance of the element, and in some cases, based on the context, they may also refer to different instances.
The terminology used in the description of the various described examples in this disclosure is for the purpose of describing particular examples only and is not intended to be limiting. Unless the context clearly indicates otherwise, if the number of elements is not specifically limited, the elements may be one or more. Furthermore, the term "and/or" as used in this disclosure is intended to encompass any and all possible combinations of the listed items.
In some application scenarios, a user may drag a component in a page. For example, in a questionnaire page, a user may drag multiple answer choices to achieve a ranking of the answer choices. For another example, in a picture editing page, the user may drag an unwanted picture to a trash box to delete the picture.
In the related art, a component drag function in a HTML (Hyper Text Markup Language) page is generally implemented by an API (Application Programming Interface) provided by a browser. However, since the APIs provided by different browsers are different, the learning and understanding costs of developers for the browser APIs are high, the development efficiency of the component dragging function is low, and the component dragging function is not easy to maintain. Moreover, the component drag function of different browsers is implemented in different ways, which causes different response efficiency of the page to the component drag operation, and may cause delay and jamming.
Therefore, the embodiment of the disclosure provides a page generation method, which can improve the development efficiency and the generation efficiency of a page with a component dragging function.
Embodiments of the present disclosure will be described in detail below with reference to the accompanying drawings.
FIG. 1 shows a flow diagram of a page generation method 100 according to an embodiment of the disclosure. Method 100 may be performed by an electronic device (e.g., electronic device 700, below).
As shown in FIG. 1, the method 100 includes steps 110-140.
In step 110, a first page is displayed, where the first page includes at least one draggable component and at least one container component for accommodating the at least one draggable component, each draggable component is bound with a start drag event and an end drag event, and each container component is bound with an accommodation event.
In step 120, in response to detecting that the start dragging event occurs to the target draggable component, the dragging state information of the target draggable component is updated, wherein the target draggable component is any one of the at least one draggable component.
In step 130, in response to detecting that the target container assembly has a receiving event, the receiving state information of the target container assembly is updated, and the target container assembly is any one of the at least one container assembly.
In step 140, in response to detecting that the end drag event occurs to the target draggable component, the first page is updated based on the drag state information and the accommodation state information to generate a second page.
According to the embodiment of the disclosure, from the perspective of component functions, the components involved in the component dragging process are divided into two types, namely draggable components and container components, and the container components are used for accommodating the draggable components. From the perspective of component state transition, a start drag event and an end drag event are bound for the draggable component, and a containment event is bound for the container component. In the process of page presentation, events bound by the draggable component and the container component are detected, state information of the corresponding draggable component or the container component is updated based on the detection result of the events, and a new page is generated based on the state information. Therefore, the page under different browsers adopts a unified mode to develop the component dragging function and respond to the component dragging operation of a user, so that the development efficiency and the generation efficiency of the page are improved, and the component dragging operation response delay and page jamming caused by browser difference are avoided.
The various steps of method 100 are described in detail below.
In step 110, a first page is displayed, where the first page includes at least one draggable component and at least one container component for accommodating the at least one draggable component, each draggable component is bound with a start drag event and an end drag event, and each container component is bound with an accommodation event.
The first page is typically an HTML page and is displayed in the browser. The first page includes a plurality of elements (HTML elements) such as paragraphs, pictures, buttons, tables, forms, etc., which may be nested between the elements. A component is made up of one or more elements. The first page has a corresponding Document Object Model (DOM). The DOM defines the objects and properties of all the elements in the first page, as well as the methods to access them. The DOM expresses the first page in a tree structure, with all of the content in the first page being expressed as nodes in the DOM tree (i.e., DOM nodes). A component in the first page generally corresponds to multiple DOM nodes in the DOM tree, and among the multiple DOM nodes corresponding to the component, the top-most DOM node (i.e., the DOM node closest to the root node of the DOM tree) is the root DOM node of the component.
In an embodiment of the present disclosure, a draggable component refers to a component that can be dragged, and a container component refers to a component that can house a draggable component. Both the draggable assembly and the container assembly may be any type of assembly, and the present disclosure does not limit the types of both.
In the embodiment of the disclosure, each draggable component is bound with a start drag event (begin) and an end drag event (end), each container component is bound with a container event, and a processing function corresponding to each event (including the start drag event, the end drag event, and the container event) is defined. And when detecting that the bound event occurs to a certain component, calling a processing function corresponding to the event. For example, when a start drag event is detected to occur in a certain draggable component, a processing function corresponding to the start drag event is called.
The event is triggered based on an interaction by a user. For example, when a user drops a mouse pointer onto a draggable component and presses a mouse button, a start drag event for the draggable component is triggered. When the user releases the mouse button, an end drag event of the draggable component is triggered. When the user keeps the state that the mouse button is pressed down and moves part or all of the dragged assembly which is dragged currently into the container assembly, the containing event of the container assembly is triggered.
A containment event refers to an event in which some or all of the currently dragged draggable component (denoted as "target draggable component") is contained in the container component. The container assembly in which the containment event occurred may be referred to as a "target container assembly". According to some embodiments, the containment events may further include a target draggable component enter event (enter), a target draggable component inside move event (hover), a target draggable component remove event (leave), and a target draggable component drop event (drop). For example, when the user holds the mouse button down, moves the mouse pointer into the target container component, thereby moving the portion of the target draggable component into the target container component, triggers the target draggable component to enter an event; when a user keeps a state that a mouse button is pressed down, moving a mouse pointer in the target container component so as to enable the target draggable component to move in the target container component, and triggering a target draggable component internal movement event; when the user holds the mouse button down, moving the mouse pointer out of the target container component to move a portion of the target draggable component out of the target container component, a target draggable component move-out event; when the mouse pointer is inside the target container component and the user releases the mouse button, a target draggable component drop event is triggered. It will be appreciated that at the same time that the target draggable component drop event is triggered, an end drag event for the target draggable component is also triggered.
FIG. 2 shows a schematic diagram of a start drag event, an end drag event, and a house event according to an embodiment of the present disclosure. As shown in FIG. 2, when a user places a mouse pointer 230 over a draggable component 210 and presses a mouse button, a start drag event (begin) occurs for the component 210, and the component 210 is a "target draggable component". The component 210 is dragged along the traces 241, 242, and when the mouse pointer is moved inside the container component 220, the container component 220 has a target draggable component entry event (enter). When the draggable component 210 is dragged along the traces 241, 243 and the mouse button is released, an end drag event (end) occurs for the component 210. Dragging the component 210 along the trajectory 244, the container component 220 occurs with a target draggable component internal movement event (hover). Dragging the component 210 along the trace 245, the container component 220 occurs with a target draggable component move event (leave). Dragging component 210 along trace 246, container component 220 again experiences a target draggable component entry event (enter). When the component 210 is dragged along the trajectory 247 and the mouse button is released, a target draggable component drop event (drop) occurs for the container component 220, while an end drag event (end) occurs for the component 210.
In step 120, in response to detecting that the start dragging event occurs to the target draggable component, the dragging state information of the target draggable component is updated, wherein the target draggable component is any one of the at least one draggable component.
In step 130, in response to detecting that the target container assembly has a receiving event, the receiving state information of the target container assembly is updated, and the target container assembly is any one of the at least one container assembly.
As described above, in embodiments of the present disclosure, a "target draggable component" refers to a draggable component that is currently being dragged by a user. "target container component" refers to a container component that houses some or all of a target draggable component. Specifically, the target draggable component may be any one draggable component selected by the user from at least one draggable component included in the first page. The target container component may be any one selected by a user from at least one container component included in the page.
According to some embodiments, the drag status information of the draggable component may be used to indicate, for example, at least one of: a type of the draggable component, an attribute, whether to drop in the container component, initial coordinates of a mouse pointer at a time of a start drag event occurrence, initial coordinates of a root DOM node of the draggable component at a time of the start drag event occurrence, current coordinates of the mouse pointer, and current coordinates of the root DOM node of the draggable component. Drag status information for a draggable component may be stored in association with an identification of the draggable component. The properties of the draggable component may include, for example, a style of the draggable component (e.g., transparency, border color, border width, font size, font color, etc.), a layout of the various elements included with the draggable component, and so forth.
According to some embodiments, the containment status information of the target container assembly may be used to indicate at least one of: the type of the container component, whether the draggable component is placed, the initial coordinates of a mouse pointer when a dragging event is started, the initial coordinates of a root DOM node of the draggable component when the dragging event is started, the current coordinates of the mouse pointer and the current coordinates of the root DOM node of the draggable component. The containment state information of the container component may be stored in association with an identification of the container component.
According to the embodiment of the disclosure, the dragging state information can comprehensively and completely record the state of the target draggable component, and the containing state information can comprehensively and completely record the state of the target container component, so that the generation efficiency of the page is improved.
According to some embodiments, updating the drag state information of the target draggable component may be implemented by starting a processing function corresponding to the drag event, and updating the receiving state information of the target container component may be implemented by a processing function corresponding to the receiving event.
According to some embodiments, each of the at least one draggable component and the at least one container component has a type parameter, respectively. The type parameter of the draggable component is used to indicate the type of the draggable component, and it is understood that the type parameter of the draggable component may be a part of the dragging status information of the draggable component, that is, the dragging status information of the draggable component includes the type parameter of the draggable component. Similarly, the type parameter of the container component is used to indicate the type of the container component, and the type parameter of the container component may be part of the receiving status information of the container component, i.e. the receiving status information of the container component includes the type parameter of the container component. The type parameter of the target container component matches the type parameter of the target draggable component. Therefore, the draggable component can be only placed in the container component with the matched type, and the container component can only contain the draggable component with the matched type. The flexibility and the diversity of component dragging are improved, and the requirements of different application scenes can be met.
According to some embodiments, in response to detecting that the target draggable component has occurred the start drag event: highlighting the target draggable component in a first pattern; determining at least one candidate container component from the at least one container component, wherein the type parameter of the candidate container component is matched with the type parameter of the target draggable component; and highlighting the at least one candidate container component in a second style. Based on the embodiment, the target draggable component and the candidate container component with the type parameter matched with the target draggable component can be highlighted, so that a user can conveniently determine the placement position of the target draggable component, and the user experience and the page generation efficiency are improved.
According to some embodiments, further, in a case that it is detected that the target container component has an entry event of the target draggable component or an internal movement event of the target draggable component, highlighting the target container component in a third style, wherein the target container component is one of the at least one candidate container component, and the third style is different from the second style; highlighting the target container component in the second style when a target draggable component removal event is detected for the target container component; and in the event that a target draggable component drop event is detected for the target container component, highlighting the target container component in a fourth style. Therefore, different styles can be adopted to display the target container assembly aiming at different accommodating events, so that a user can know the dragging state conveniently, and the user experience and the page generation efficiency are improved.
3A-3D are schematic diagrams illustrating display effects of a target draggable component, a candidate container component, and a target container component according to embodiments of the disclosure. As shown in FIG. 3A, three draggable components, i.e., draggable components 312, 314, 316, and four container components, i.e., container components 322, 324, 326, 328, are displayed in the first page. When the user places the mouse pointer 330 over the draggable component 316 and presses a mouse button, a start drag event (begin) occurs for the component 316, which component 316 is the target draggable component and is highlighted (first style). The type parameter of the component 316 is type1, and the type parameters of the container component 324 and the container component 326 are type1, which are the same as the type parameter of the component 316, so the container component 324 and the container component 326 are displayed as candidate container components in a vertical line shading (second style). In FIG. 3B, the component 324 is detected to have a target draggable component entry event, i.e., the component 316 enters the component 324, and thus the component 324 is displayed in diagonal shading (third style) as a target container component. In FIG. 3C, a component 324 is detected as having a target draggable component move-out event, i.e., the component 316 moves out of the component 324, and the component 324 is displayed in a vertical line shading (second style). In fig. 3D, the target container component 326 is detected to have a target draggable component drop event, i.e., the component 316 is dropped in the component 326, and the target container component is displayed in the original style (fourth style).
According to some embodiments, after updating the drag status information of the target draggable component through step 120, the drag status information is synchronized to the at least one container component; after the receiving state information of the target container assembly is updated, the method further comprises the following steps: the receiving state information is synchronized to the target draggable component. Therefore, the communication efficiency between the draggable component and the container component can be improved, and the page generation efficiency is improved.
In step 140, in response to detecting that the end drag event occurs to the target draggable component, the first page is updated based on the drag state information and the accommodation state information to generate a second page.
According to some embodiments, the first page may be re-rendered to generate the second page based on the drag state information of the target draggable component and the receipt state information of the target container component.
According to the embodiment of the disclosure, a page generating device is also provided. Fig. 4 shows a block diagram of a page generation apparatus 400 according to an embodiment of the present disclosure. As shown in fig. 4, the apparatus 400 includes:
a first display module 410 configured to display a first page, the first page including at least one draggable component and at least one container component for accommodating the at least one draggable component, each draggable component having a start drag event and an end drag event bound thereto, each container component having a container event bound thereto;
a first state updating module 420 configured to update dragging state information of a target draggable component in response to detecting that the start dragging event occurs for the target draggable component, wherein the target draggable component is any one of the at least one draggable component;
a second status update module 430 configured to update the containment status information of a target container component in response to detecting that the containment event occurred for the target container component; and
a second display module 440 configured to update the first page to generate a second page based on the drag status information and the accommodation status information in response to detecting that the end drag event occurs to the target draggable component.
According to the embodiment of the disclosure, from the perspective of component functions, the components involved in the component dragging process are divided into two types, namely draggable components and container components, and the container components are used for accommodating the draggable components. From the perspective of component state transition, a start drag event and an end drag event are bound for the draggable component, and a containment event is bound for the container component. In the process of page presentation, events bound by the draggable component and the container component are detected, state information of the corresponding draggable component or the container component is updated based on the detection result of the events, and a page is generated based on the state information. Therefore, the page under different browsers adopts a unified mode to develop the component dragging function and respond to the component dragging operation of a user, so that the development efficiency and the generation efficiency of the page are improved, and the component dragging operation response delay and page jamming caused by browser difference are avoided.
According to some embodiments, each of the at least one draggable component and the at least one container component has a type parameter, respectively, the type parameter of the target container component matching the type parameter of the target draggable component.
According to some embodiments, the apparatus 400 further comprises a third display module configured to, in response to detecting that the target draggable component has occurred the start drag event: highlighting the target draggable component in a first pattern; determining at least one candidate container component from the at least one container component, the type parameter of the candidate container component matching the type parameter of the target draggable component; and highlighting the at least one candidate container component in a second style.
According to some embodiments, the accommodation events include a target draggable component entry event, a target draggable component internal movement event, a target draggable component removal event, and a target draggable component drop event, the apparatus 400 further comprising: a fourth display module configured to highlight a target container component in a third style if the target container component is detected to have the target draggable component entering event or the target draggable component internal moving event, wherein the target container component is one of the at least one candidate container component, and the third style is different from the second style; a fifth display module configured to highlight the target container component in the second style if the target draggable component removal event is detected for the target container component; and a sixth display module configured to highlight the target container component in a fourth style if the target draggable component drop event is detected for the target container component.
According to some embodiments, the apparatus 400 further comprises an event bus module configured to: after updating the drag status information of the target draggable component, synchronizing the drag status information to the at least one container component; and after updating the containment state information of the target container component, synchronizing the containment state information to the target draggable component.
According to some embodiments, the drag status information is used to indicate at least one of: a type of the draggable component, an attribute, whether the draggable component is placed in a container component, initial coordinates of a mouse pointer at the time of starting a drag event, initial coordinates of a root DOM node of the draggable component at the time of starting a drag event, current coordinates of the mouse pointer, and current coordinates of the root DOM node of the draggable component; the accommodation state information is used for indicating at least one of the following: the type of the container component, whether the draggable component is placed, the initial coordinates of a mouse pointer when a dragging event is started, the initial coordinates of a root DOM node of the draggable component when the dragging event is started, the current coordinates of the mouse pointer and the current coordinates of the root DOM node of the draggable component.
It should be understood that the various modules or units of the apparatus 400 shown in fig. 4 may correspond to the various steps in the method 100 described with reference to fig. 1. Thus, the operations, features and advantages described above with respect to the method 100 are equally applicable to the apparatus 400 and the modules and units comprised thereby. Certain operations, features and advantages may not be described in detail herein for the sake of brevity.
Although specific functionality is discussed above with reference to particular modules, it should be noted that the functionality of the various modules discussed herein may be divided into multiple modules and/or at least some of the functionality of multiple modules may be combined into a single module. For example, the first display module 410 and the second display module 440 described above may be combined into a single module in some embodiments.
It should also be appreciated that various techniques may be described herein in the general context of software, hardware elements, or program modules. The various modules described above with respect to fig. 4 may be implemented in hardware or in hardware in combination with software and/or firmware. For example, the modules may be implemented as computer program code/instructions configured to be executed in one or more processors and stored in a computer-readable storage medium. Alternatively, the modules may be implemented as hardware logic/circuitry. For example, in some embodiments, one or more of the modules 410, 440 may be implemented together in a System on a Chip (SoC). The SoC may include an integrated circuit chip (which includes one or more components of a Processor (e.g., a Central Processing Unit (CPU), microcontroller, microprocessor, Digital Signal Processor (DSP), etc.), memory, one or more communication interfaces, and/or other circuitry), and may optionally execute received program code and/or include embedded firmware to perform functions.
According to an embodiment of the present disclosure, there is also provided an electronic device, a readable storage medium, and a computer program product.
Referring to fig. 5, a block diagram of a structure of an electronic device 500, which may be a server or a client of the present disclosure, which is an example of a hardware device that may be applied to aspects of the present disclosure, will now be described. Electronic device is intended to represent various forms of digital electronic computer devices, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 5, the electronic device 500 includes a computing unit 501, which can perform various appropriate actions and processes according to a computer program stored in a Read Only Memory (ROM)502 or a computer program loaded from a storage unit 508 into a Random Access Memory (RAM) 503. In the RAM503, various programs and data required for the operation of the device 500 can also be stored. The calculation unit 501, the ROM502, and the RAM503 are connected to each other by a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
A number of components in the electronic device 500 are connected to the I/O interface 505, including: an input unit 506, an output unit 507, a storage unit 508, and a communication unit 509. The input unit 506 may be any type of device capable of inputting information to the device 500, and the input unit 506 may receive input numeric or character information and generate key signal inputs related to user settings and/or function controls of the electronic device, and may include, but is not limited to, a mouse, a keyboard, a touch screen, a track pad, a track ball, a joystick, a microphone, and/or a remote controller. Output unit 507 may be any type of device capable of presenting information and may include, but is not limited to, a display, speakers, a video/audio output terminal, a vibrator, and/or a printer. The storage unit 508 may include, but is not limited to, a magnetic disk, an optical disk. The communication unit 509 allows the device 500 to exchange information/data with other devices via a computer network, such as the internet, and/or various telecommunication networks, and may include, but is not limited to, a modem, a network card, an infrared communication device, a wireless communication transceiver, and/or a chipset, such as bluetoothTMDevices, 802.11 devices, Wi-Fi devices, WiMAX devices, cellular communication devices, and/or the like.
The computing unit 501 may be a variety of general-purpose and/or special-purpose processing components having processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various dedicated Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, and so forth. The computing unit 501 performs the various methods and processes described above, such as the method 100. For example, in some embodiments, the method 100 may be implemented as a computer software program tangibly embodied in a machine-readable medium, such as the storage unit 508. In some embodiments, part or all of the computer program may be loaded and/or installed onto the device 500 via the ROM502 and/or the communication unit 509. When loaded into RAM503 and executed by the computing unit 501, may perform one or more of the steps of the method 100 described above. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the method 100 by any other suitable means (e.g., by means of firmware).
Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a chip (SOCs), Complex Programmable Logic Devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the program codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic, speech, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), Wide Area Networks (WANs), and the Internet.
The computer system may include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server may be a cloud server, a server of a distributed system, or a server with a combined blockchain.
It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be performed in parallel, sequentially or in different orders, and are not limited herein as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved.
Although embodiments or examples of the present disclosure have been described with reference to the accompanying drawings, it is to be understood that the above-described methods, systems and apparatus are merely exemplary embodiments or examples and that the scope of the present invention is not limited by these embodiments or examples, but only by the claims as issued and their equivalents. Various elements in the embodiments or examples may be omitted or may be replaced with equivalents thereof. Further, the steps may be performed in an order different from that described in the present disclosure. Further, various elements in the embodiments or examples may be combined in various ways. It is important that as technology evolves, many of the elements described herein may be replaced with equivalent elements that appear after the present disclosure.

Claims (15)

1. A page generation method includes:
displaying a first page, wherein the first page comprises at least one draggable component and at least one container component for accommodating the at least one draggable component, each draggable component is bound with a start dragging event and an end dragging event, and each container component is bound with an accommodating event;
updating dragging state information of a target draggable component in response to detecting that the starting dragging event occurs to the target draggable component, wherein the target draggable component is any one of the at least one draggable component;
in response to detecting that the accommodation event occurs to a target container assembly, updating accommodation state information of the target container assembly, wherein the target container assembly is any one of the at least one container assembly; and
in response to detecting that the end dragging event occurs to the target draggable component, updating the first page based on the dragging state information and the accommodating state information to generate a second page.
2. The method of claim 1, wherein each of the at least one draggable component and the at least one container component has a type parameter, respectively, and the type parameter of the target container component matches the type parameter of the target draggable component.
3. The method of claim 2, further comprising:
in response to detecting the target draggable component occurrence of the start drag event:
highlighting the target draggable component in a first pattern;
determining at least one candidate container component from the at least one container component, the type parameter of the candidate container component matching the type parameter of the target draggable component; and
highlighting the at least one candidate container component in a second style.
4. The method of claim 3, wherein the containment events include a target draggable component entry event, a target draggable component internal movement event, a target draggable component removal event, and a target draggable component drop event, the method further comprising:
in the case that it is detected that the target container component has the target draggable component entering event or the target draggable component internal moving event, highlighting the target container component in a third style, wherein the target container component is one of the at least one candidate container component, and the third style is different from the second style;
upon detecting the target container component occurrence of the target draggable component removal event, highlighting the target container component in the second style; and
upon detecting the target container component occurrence of the target draggable component drop event, highlighting the target container component in a fourth style.
5. The method of any of claims 1-4, wherein after updating the drag status information of the target draggable component, further comprising: synchronizing the drag status information to the at least one container component;
after the update of the accommodation state information of the target container assembly, the method further comprises the following steps: synchronizing the housing state information to the target draggable component.
6. The method according to any one of claims 1-5, wherein the drag status information is used to indicate at least one of: a type of the draggable component, an attribute, whether the draggable component is placed in a container component, initial coordinates of a mouse pointer at the time of starting a drag event, initial coordinates of a root DOM node of the draggable component at the time of starting a drag event, current coordinates of the mouse pointer, and current coordinates of the root DOM node of the draggable component;
the accommodation state information is used for indicating at least one of the following: the type of the container component, whether the draggable component is placed, the initial coordinates of a mouse pointer when a dragging event is started, the initial coordinates of a root DOM node of the draggable component when the dragging event is started, the current coordinates of the mouse pointer and the current coordinates of the root DOM node of the draggable component.
7. A page generating apparatus, comprising:
a first display module configured to display a first page, the first page including at least one draggable component and at least one container component for accommodating the at least one draggable component, each draggable component having a start drag event and an end drag event bound thereto, each container component having an accommodation event bound thereto;
a first state updating module configured to update dragging state information of a target draggable component in response to detecting that the start dragging event occurs for the target draggable component, wherein the target draggable component is any one of the at least one draggable component;
a second state updating module configured to update the accommodation state information of a target container component in response to detecting that the accommodation event occurs to the target container component; and
a second display module configured to update the first page based on the drag status information and the accommodation status information to generate a second page in response to detecting that the end drag event occurs to the target draggable component.
8. The apparatus of claim 7, wherein each of the at least one draggable component and the at least one container component has a type parameter, respectively, the type parameter of the target container component matching the type parameter of the target draggable component.
9. The apparatus of claim 8, further comprising a third display module configured to, in response to detecting the target draggable component occurrence of the start drag event:
highlighting the target draggable component in a first pattern;
determining at least one candidate container component from the at least one container component, the type parameter of the candidate container component matching the type parameter of the target draggable component; and
highlighting the at least one candidate container component in a second style.
10. The apparatus of claim 9, wherein the containment events include a target draggable component entry event, a target draggable component internal movement event, a target draggable component removal event, and a target draggable component drop event, the apparatus further comprising:
a fourth display module configured to highlight a target container component in a third style if the target container component is detected to have the target draggable component entering event or the target draggable component internal moving event, wherein the target container component is one of the at least one candidate container component, and the third style is different from the second style;
a fifth display module configured to highlight the target container component in the second style if the target draggable component removal event is detected for the target container component; and
a sixth display module configured to highlight the target container component in a fourth style if the target draggable component drop event is detected for the target container component.
11. The apparatus of any of claims 7-10, further comprising an event bus module configured to:
after updating the drag status information of the target draggable component, synchronizing the drag status information to the at least one container component; and
after updating the containment state information for the target container component, synchronizing the containment state information to the target draggable component.
12. The apparatus according to any one of claims 7-11, wherein the drag status information is to indicate at least one of: a type of the draggable component, an attribute, whether the draggable component is placed in a container component, initial coordinates of a mouse pointer at the time of starting a drag event, initial coordinates of a root DOM node of the draggable component at the time of starting a drag event, current coordinates of the mouse pointer, and current coordinates of the root DOM node of the draggable component;
the accommodation state information is used for indicating at least one of the following: the type parameter of the container component, whether the draggable component is placed, the initial coordinate of a mouse pointer when the dragging event is started, the initial coordinate of the root DOM node of the draggable component when the dragging event is started, the current coordinate of the mouse pointer and the current coordinate of the root DOM node of the draggable component.
13. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein
The memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-6.
14. A non-transitory computer readable storage medium having stored thereon computer instructions for causing a computer to perform the method of any one of claims 1-6.
15. A computer program product comprising a computer program, wherein the computer program realizes the method of any one of claims 1-6 when executed by a processor.
CN202111458856.XA 2021-12-02 Page generation method and device, electronic equipment and medium Active CN114115681B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111458856.XA CN114115681B (en) 2021-12-02 Page generation method and device, electronic equipment and medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111458856.XA CN114115681B (en) 2021-12-02 Page generation method and device, electronic equipment and medium

Publications (2)

Publication Number Publication Date
CN114115681A true CN114115681A (en) 2022-03-01
CN114115681B CN114115681B (en) 2024-07-02

Family

ID=

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114610190A (en) * 2022-03-14 2022-06-10 富途网络科技(深圳)有限公司 Interface editing method and device, electronic equipment and readable medium
CN114690997A (en) * 2022-04-15 2022-07-01 北京百度网讯科技有限公司 Text display method and device, equipment, medium and product
CN115220629A (en) * 2022-06-23 2022-10-21 惠州华阳通用电子有限公司 Interface element position adjusting method

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100192140A1 (en) * 2009-01-27 2010-07-29 International Business Machines Corporation Method for presenting candidate for link target to component in web application, as well as computer program and computer system for the same
US20120198374A1 (en) * 2011-01-31 2012-08-02 Oracle International Corporation Drag and drop interaction between components of a web application
US20150370542A1 (en) * 2014-06-23 2015-12-24 Vmware, Inc. Drag-and-drop functionality for scalable vector graphics
CN108021310A (en) * 2016-10-28 2018-05-11 中国电信股份有限公司 Mobile phone page makeup method and apparatus
US20180293323A1 (en) * 2016-07-27 2018-10-11 Wix.Com Ltd. System and method for smart interaction between website components
CN109614097A (en) * 2018-12-07 2019-04-12 北京金山云网络技术有限公司 Generation method, device and the server of platform code
CN111352628A (en) * 2020-02-28 2020-06-30 深圳壹账通智能科技有限公司 Front-end code generation method and device, computer system and readable storage medium
CN111813566A (en) * 2019-04-30 2020-10-23 厦门雅基软件有限公司 Cross-process dragging method, device, equipment and computer readable storage medium
CN112000328A (en) * 2020-09-04 2020-11-27 赞同科技股份有限公司 Page visual editing method, device and equipment
CN112965645A (en) * 2021-03-15 2021-06-15 中国平安财产保险股份有限公司 Page dragging method and device, computer equipment and storage medium

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100192140A1 (en) * 2009-01-27 2010-07-29 International Business Machines Corporation Method for presenting candidate for link target to component in web application, as well as computer program and computer system for the same
US20120198374A1 (en) * 2011-01-31 2012-08-02 Oracle International Corporation Drag and drop interaction between components of a web application
US20150370542A1 (en) * 2014-06-23 2015-12-24 Vmware, Inc. Drag-and-drop functionality for scalable vector graphics
US20180293323A1 (en) * 2016-07-27 2018-10-11 Wix.Com Ltd. System and method for smart interaction between website components
CN108021310A (en) * 2016-10-28 2018-05-11 中国电信股份有限公司 Mobile phone page makeup method and apparatus
CN109614097A (en) * 2018-12-07 2019-04-12 北京金山云网络技术有限公司 Generation method, device and the server of platform code
CN111813566A (en) * 2019-04-30 2020-10-23 厦门雅基软件有限公司 Cross-process dragging method, device, equipment and computer readable storage medium
CN111352628A (en) * 2020-02-28 2020-06-30 深圳壹账通智能科技有限公司 Front-end code generation method and device, computer system and readable storage medium
CN112000328A (en) * 2020-09-04 2020-11-27 赞同科技股份有限公司 Page visual editing method, device and equipment
CN112965645A (en) * 2021-03-15 2021-06-15 中国平安财产保险股份有限公司 Page dragging method and device, computer equipment and storage medium

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
郭庆华;朱战立;: "基于分层思想的界面控件拖动", 软件导刊, no. 02, 28 February 2010 (2010-02-28) *
马学民;吕宝庆;张涛;吕嘉欣;: "文本视图显示及信息拖动换行技术", 测绘与空间地理信息, no. 09, 25 September 2015 (2015-09-25) *

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114610190A (en) * 2022-03-14 2022-06-10 富途网络科技(深圳)有限公司 Interface editing method and device, electronic equipment and readable medium
CN114610190B (en) * 2022-03-14 2024-05-31 富途网络科技(深圳)有限公司 Interface editing method, device, electronic equipment and readable medium
CN114690997A (en) * 2022-04-15 2022-07-01 北京百度网讯科技有限公司 Text display method and device, equipment, medium and product
CN114690997B (en) * 2022-04-15 2023-07-25 北京百度网讯科技有限公司 Text display method and device, equipment, medium and product
CN115220629A (en) * 2022-06-23 2022-10-21 惠州华阳通用电子有限公司 Interface element position adjusting method
CN115220629B (en) * 2022-06-23 2024-04-05 惠州华阳通用电子有限公司 Interface element position adjustment method

Similar Documents

Publication Publication Date Title
EP3518124A1 (en) Webpage rendering method and related device
US10579508B2 (en) Method and apparatus for processing code
US9152529B2 (en) Systems and methods for dynamically altering a user interface based on user interface actions
KR20130127349A (en) System and control method for character make-up
CN105612511B (en) Identifying and structuring related data
CN112783394A (en) List page display method and device
CN112835579A (en) Method and device for determining interface code, electronic equipment and storage medium
CN113138827A (en) Method, device, electronic equipment and medium for displaying data
CN115578486A (en) Image generation method and device, electronic equipment and storage medium
CN112784588B (en) Method, device, equipment and storage medium for labeling text
CN113656533A (en) Tree control processing method and device and electronic equipment
US10275525B2 (en) Method and system for mining trends around trending terms
CN112947916A (en) Method, device, equipment and storage medium for realizing online canvas
CN114115681B (en) Page generation method and device, electronic equipment and medium
CN114510308B (en) Method, device, equipment and medium for storing application page by mobile terminal
CN114115681A (en) Page generation method and device, electronic equipment and medium
CN113485782A (en) Page data acquisition method and device, electronic equipment and medium
US9600161B2 (en) Generating and displaying a specific area
CN113642295A (en) Page layout method, page layout device and computer program product
CN114077371A (en) Information display method and device, electronic equipment and storage medium
CN113515210A (en) Display method, display device, electronic equipment and storage medium
CN112966201A (en) Object processing method, device, electronic equipment and storage medium
CN114398122B (en) Input method, input device, electronic equipment, storage medium and product
US10997341B1 (en) System editing plugin
CN108628816B (en) Cell selection method and terminal equipment

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
GR01 Patent grant