CN114546568A - Page element drag and drop method and device, electronic equipment and storage medium - Google Patents
Page element drag and drop method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN114546568A CN114546568A CN202210177861.1A CN202210177861A CN114546568A CN 114546568 A CN114546568 A CN 114546568A CN 202210177861 A CN202210177861 A CN 202210177861A CN 114546568 A CN114546568 A CN 114546568A
- Authority
- CN
- China
- Prior art keywords
- container
- page element
- page
- background picture
- drag
- 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/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)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention provides a page element drag and drop method, a page element drag and drop device, electronic equipment and a storage medium, and relates to the technical field of information. The method is applied to a browser in the electronic equipment. Firstly, responding to long-time pressing operation of a user on page elements displayed in a webpage, and generating copy page elements of the page elements; then, responding to the dragging operation of the page element, and displaying a background picture along the dragging track of the dragging operation; finally, when the end of the dragging operation is detected, stopping displaying the background picture and acquiring the end position of the dragging operation; and if the end position of the dragging operation is in a target area which is pre-established in the webpage, displaying the copied page element in the target area. The method can support the background picture in the user-defined drag-and-drop process and display the background picture, and the method is applied to various browsers, so that the limitation that different browsers in the prior art have inconsistent support conditions of the user-defined background function is eliminated.
Description
Technical Field
The invention relates to the technical field of information, in particular to a page element drag and drop method, a page element drag and drop device, electronic equipment and a storage medium.
Background
With the development of various webpage making technologies, a user can make a webpage according to own requirements, the webpage is no longer only used for information display, and the current webpage making focuses on interaction between the webpage and the user. For example, when a webpage for classifying pictures is manufactured, the positions of the pictures are required to be moved frequently, and compared with a copy-and-paste mode, the mode of changing the positions of the pictures by using drag and drop is often more intuitive. Furthermore, drag and drop operations are also commonly used for other page elements displayed on a web page, such as titles, animations, command buttons, etc.
In the process of drag-and-drop, if the background during drag-and-drop can be customized, the visual experience of the user can be greatly improved. However, when different browsers are used to drag and drop page elements in a web page, the supported additional functions are often different, some browsers support the background during custom drag and drop, and some browsers do not support the background during custom drag and drop, which causes a large visual difference between different browsers for the same web page.
Disclosure of Invention
The invention aims to provide a page element drag-and-drop method, a device, electronic equipment and a storage medium, wherein the method is applied to various browsers, can support a background picture during custom drag-and-drop when the page elements of a webpage in the browser are dragged and dropped, and displays the custom background picture during the dragging process, so that the limitation that different browsers in the prior art have inconsistent support conditions of custom background functions is eliminated.
Embodiments of the invention may be implemented as follows:
on one hand, the embodiment of the invention provides a page element drag and drop method, which is applied to a browser in electronic equipment, wherein the electronic equipment displays a webpage of the browser and stores a background picture in advance, and the background picture is self-defined; the method comprises the following steps:
responding to long-press operation on pre-established page elements displayed in the webpage to generate copy page elements of the page elements;
responding to a dragging operation continuous to the long pressing operation on the page element, and displaying the background picture along a dragging track of the dragging operation, wherein the page element is a label element displayed on the webpage;
when the dragging operation is detected to be finished, stopping displaying the background picture, and acquiring the finishing position of the dragging operation;
and if the end position of the dragging operation is in a target area pre-established in the webpage, displaying the copied page element in the target area.
In one possible embodiment, before the step of generating a duplicate page element of the page elements in response to a long press operation on a pre-created page element displayed in the web page, the method further includes:
creating a container and the page element, creating an initial area and the target area in the webpage, and setting the display attribute of the container to be invisible; displaying the page element in the initial area;
and mounting the background picture into the container to hide the background picture, wherein the background picture and the page element are positioned at the same position in the webpage.
In a possible implementation manner, the step of displaying the background picture along a drag track of the drag operation in response to the drag operation on the page element that is continuous with the long press operation includes:
responding to the dragging operation and acquiring a real-time position of the dragging operation;
determining the current position of the container according to a preset formula according to the real-time position of the dragging operation;
and setting the positioning attribute of the container according to the current position, and setting the display attribute of the container to be visible so as to display a background picture along the dragging track of the dragging operation.
In a possible embodiment, the real-time position of the dragging operation comprises a first abscissa and a first ordinate; the step of determining the current position of the container according to the real-time position of the dragging operation and a preset formula comprises the following steps:
according to said first abscissa, according to a formula
Calculating a second abscissa, wherein X represents the second abscissa, X represents the first abscissa, and w represents the width of the container;
according to said first ordinate, according to a formula
Calculating to obtain a second ordinate, wherein Y represents the second ordinate, Y represents the first ordinate, and h represents the height of the container;
obtaining the current position, the current position including the second abscissa and the second ordinate.
In a possible embodiment, the step of setting a positioning attribute, a left edge attribute and an upper edge attribute of the container according to the current position, and setting a display attribute of the container to be visible to display a background picture along a drag trajectory of the drag operation includes:
according to the current position, setting the positioning attribute of the container to be fixed positioning, setting the left edge attribute to be a second abscissa, setting the upper edge attribute to be a second ordinate, and setting the display attribute of the container to be visible, so as to display a background picture along the dragging track of the dragging operation.
In a possible implementation, after acquiring the end position of the drag operation, the method further includes:
judging whether the end position of the dragging operation is in the target area;
and if the end position of the dragging operation is not in the target area, deleting the copied page element.
In one possible embodiment, the method for creating a container and the page element, and creating an initial area and the target area in the web page includes:
defining a container, the page elements, an initial area and the target area, and configuring parameters for the container, the page elements, the initial area and the target area;
creating the container and the page elements according to the parameters;
and creating the initial area and the target area according to the parameters, and performing layout to display the initial area and the target area in the webpage.
In a second aspect, an embodiment of the present invention further provides a page element drag-and-drop apparatus, which is applied to a browser in an electronic device, where the electronic device displays a web page of the browser and stores a background picture in advance, and the background picture is self-defined; the device comprises:
the copying module is used for responding to long-press operation of a pre-created page element displayed in the webpage and generating a copied page element of the page element, wherein the page element is a tag element displayed on the webpage;
the dragging module is used for responding to dragging operation continuous to the long pressing operation on the page element and displaying the background picture along a dragging track of the dragging operation;
the acquisition module is used for stopping displaying the background picture and acquiring the end position of the dragging operation when the dragging operation is detected to be ended;
and the display module is used for displaying the copied page element in a target area if the end position of the dragging operation is in the target area which is created in advance in the webpage.
In a third aspect, an embodiment of the present invention further provides an electronic device, where the electronic device is installed with a browser, and the electronic device includes:
one or more processors;
memory to store one or more programs that, when executed by the one or more processors, cause the one or more processors to implement the page element drag and drop method described above.
In a fourth aspect, the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the page element drag and drop method described above.
Compared with the prior art, the page element drag and drop method, the device, the electronic device and the storage medium provided by the embodiment of the invention have the advantages that firstly, the copy page element of the page element is generated in response to the long-press operation of the user on the page element displayed in the webpage; then, responding to the dragging operation of the page element which is continuous with the long pressing operation, and displaying the background picture along the dragging track of the dragging operation; finally, when the end of the dragging operation is detected, stopping displaying the background picture and acquiring the end position of the dragging operation; and if the end position of the dragging operation is in a target area which is created in advance in the webpage, displaying the copied page element in the target area. Therefore, the method is applied to the browser, so that various browsers can be operated in this way, and the inconsistent limit of different browsers on the support condition of the custom background function in the prior art is eliminated; in addition, the background picture during the user-defined drag and drop can be supported, and the user-defined background picture is displayed in the dragging process.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
Fig. 1 is a block diagram of an electronic device according to an embodiment of the present invention.
Fig. 2 is a schematic flowchart of a page element drag-and-drop method according to an embodiment of the present invention.
Fig. 3 is another schematic flow chart of a page element drag-and-drop method according to an embodiment of the present invention.
Fig. 4(a) is one of exemplary diagrams of a page drag and drop method according to an embodiment of the present invention.
Fig. 4(b) is a second example of a process of the page drag and drop method according to the embodiment of the present invention.
Fig. 4(c) is a third exemplary process diagram of the page drag and drop method according to the embodiment of the present invention.
Fig. 4(d) is a fourth exemplary process diagram of the page drag and drop method according to the embodiment of the present invention.
Fig. 5 is a schematic flowchart of step S120 in the enhancement policy determination method shown in fig. 2.
Fig. 6 is a schematic flowchart of another page element drag-and-drop method according to an embodiment of the present invention.
Fig. 7 is a block diagram illustrating a page element drag-and-drop apparatus according to an embodiment of the present invention.
Icon: 100-an electronic device; 101-a memory; 102-a processor; 103-a bus; 200-page element drag and drop means; 201-creation module; 202-a replication module; 203-a drag module; 204-an obtaining module; 205-display module.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all, embodiments of the present invention. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.
Furthermore, the appearances of the terms "first," "second," and the like, if any, are used solely to distinguish one from another and are not to be construed as indicating or implying relative importance.
It should be noted that the features of the embodiments of the present invention may be combined with each other without conflict.
In the prior art, only some browsers with the latest version can customize the background during drag and drop, and an IE browser and a low-version Edge browser do not support the background during the custom drag and drop. This causes a large visual difference when different browsers operate the same web page, which results in poor compatibility with the web page and poor user experience.
In view of the above problems, the present embodiment provides a page element drag and drop method, which is applied to various browsers, and when performing drag and drop operation on a page element of a webpage displayed in a browser, a background during the drag and drop can be defined by user, so that compatibility of the webpage is improved.
Referring to fig. 1, fig. 1 is a block diagram illustrating an electronic device 100 according to the present embodiment, where the electronic device 100 may be, but is not limited to, a mobile phone, a tablet computer, a notebook computer, a server, or other electronic devices with processing capability. Electronic device 100 includes memory 101, processor 102, and bus 103. The memory 101 and the processor 102 are connected by a bus 103.
The memory 101 is used to store programs such as a page element drag-and-drop apparatus 200 and a browser in which the page element drag-and-drop apparatus 200 is installed in the form of a plug-in.
The page element drag-and-drop apparatus 200 includes at least one software function module which can be stored in the memory 101 in the form of software or firmware (firmware), and the processor 102 executes the program to implement the page element drag-and-drop method in the embodiment after receiving the execution instruction.
The Memory 101 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like.
The processor 102 may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the page element drag and drop method in this embodiment may be implemented by integrated logic circuits of hardware in the processor 102 or instructions in the form of software. The processor 102 may be a general-purpose processor, and includes a Central Processing Unit (CPU), a Micro Control Unit (MCU), a Complex Programmable Logic Device (CPLD), a Field Programmable Gate Array (FPGA), and an embedded ARM.
On the basis of the electronic device 100 shown in fig. 1, the page element drag-and-drop method provided by the present embodiment is described. Referring to fig. 2, fig. 2 is a schematic flowchart illustrating a page element drag-and-drop method provided in this embodiment, where the method includes the following steps:
s110, responding to long press operation of pre-created page elements displayed in the webpage, and generating copy page elements of the page elements.
In this embodiment, the page element drag and drop method is applied to a browser in an electronic device, and the electronic device displays a web page with the browser, where the browser may be, but is not limited to, an IE browser and a low-version Edge browser, or other modern browsers; the web page may be a web page produced by a user based on HTML language (hypertext markup language).
A page element is a tab element for display on a web page. For example, in web page development using the HTML language, any HTML tag element that can be exposed within the < body > tag includes, but is not limited to, div (region tag element), span (in-line tag element), h1-h6 (title tag element), p (block tag element), ol (list element), ul (list element), li (list element), and the like. The corresponding information may be characters, pictures, audio, animation, video, command buttons, and other elements in the web page.
For an electronic device with a touch function on a screen, the long-press operation may be an operation of long-pressing the screen with a finger; for an electronic device with a screen having no touch function, the long-press operation may be an operation of long-pressing a left button of a mouse.
And after generating the copy page elements, storing the copy page elements in the memory.
And S120, responding to the dragging operation of the page element continuous to the long-press operation, and displaying the background picture along the dragging track of the dragging operation.
In this embodiment, the electronic device stores a background picture in advance, and the background picture may be any picture customized by a user.
And S130, when the end of the dragging operation is detected, stopping displaying the background picture, and acquiring the end position of the dragging operation.
In this embodiment, the end of the dragging operation may be that the finger leaves the touch screen, or the left button of the mouse is released, and the display of the background picture is stopped.
Wherein stopping displaying the background picture may be achieved by setting a display attribute of the container to be invisible.
And S140, if the end position of the dragging operation is in a target area which is created in advance in the webpage, displaying the copy page element in the target area.
In this embodiment, the target area is an area that is created in advance in the web page and is used for displaying the copied page element, and if the end position of the dragging operation is within the target area that is created in advance in the web page, the copied page element is loaded from the memory into the target area and is displayed.
In addition, after the copy page element is displayed in the target area, the copy page element stored in the memory is deleted to release the memory.
Compared with the prior art, the page element drag-and-drop method provided by the embodiment can be used for customizing the background during drag-and-drop when the page elements displayed on the webpages of different browsers are dragged and dropped, and the compatibility is improved.
Referring to fig. 3, before step S110, the following steps may be further included:
s101, creating a container and the page elements, creating an initial area and a target area in the webpage, and setting the display attribute of the container to be invisible.
In this embodiment, the container is used to mount a background picture, the initial area is used to display page elements, and the target area is used to display copied page elements. In general, a container may customize the Style of the container using CSS (Cascading Style Sheets) attributes, for example, display attribute display for setting the visible or invisible of the container, position attribute position for setting the position of the container, left edge attribute left for setting the position of the left edge of the container, and top edge attribute top for setting the position of the top edge of the container.
S102, displaying the page elements in the initial area.
S103, mounting the background picture into a container to hide the background picture, wherein the background picture and the page element are located at the same position in the webpage.
In one possible scenario, creating the container and the page element in step S101, and creating the initial area and the target area in the web page may include the following detailed steps:
firstly, defining a container, the page element, an initial area and the target area, and configuring parameters for the container, the page element, the initial area and the target area;
secondly, creating the container and the page elements according to the parameters;
and thirdly, creating the initial area and the target area according to the parameters, and performing layout to display the initial area and the target area in the webpage.
In the present embodiment, for ease of understanding, S101-S103 may be implemented according to the following procedure:
when a web page is manufactured, firstly, parameter configuration is required, including defining a container, a page element, an initial area, a target area and a background picture. Then, according to the configured parameters, creating an initial region and a target region in the webpage, and adding a CSS (Cascading Style Sheets) Style for page layout so as to display the initial region and the target region in the webpage; a container is created and the CSS attribute display of the container is set to none to hide the container.
And finally, mounting the page elements into the initial area for displaying, and mounting the background picture into a container to hide the background picture.
It should be noted that the created container, the page element, the initial region and the target region are div elements, for example, the page element may be < div > </div > with a width and a height of 50px, and the background picture may be a picture element with a height and a width of 100 px.
In addition, in a specific implementation process, before the page element is mounted in the initial area for display, a draggable identifier data-drag-true may be further added to the page element to characterize the page element as a draggable page element.
Correspondingly, in step S110, after the long-press operation is detected, it is first determined whether a page element associated with the long-press operation has a drag-drag flag, if so, a copy page element of the page element is generated and stored in the memory, and if not, a draggable flag data-drag flag is added to the page element.
To facilitate understanding of the above processes, please refer to fig. 4(a) -4 (d), and fig. 4(a) -4 (d) are exemplary diagrams of the processes of the page element drag and drop method provided in this embodiment. And opening a webpage by using any browser, wherein an initial area, a target area and page elements are displayed on the webpage, and at the moment, the background picture is hidden in the initial area.
The user presses the page element for a long time, as shown in fig. 4(a), and generates a copy page element and stores it in the memory; then, the long-press motion is maintained, and the web page is moved, as shown in fig. 4(b), in which the background picture is displayed and moved along the trajectory curve of the dragging operation.
Then, as shown in fig. 4(c), when the background picture is in the target area, the movement is stopped, but the long-press operation is still maintained, and at this time, the background picture is still displayed on the page; finally, the finger leaves the touch screen, or the left mouse button is released, the dragging operation is finished, as shown in fig. 4(d), the background picture is hidden at this time, and the copied page elements are loaded to the target area from the memory for display. Referring to fig. 5, the step S120 is described in detail below, and on the basis of fig. 2, the step S120 may include the following detailed steps:
and S1201, responding to the dragging operation and acquiring the real-time position of the dragging operation.
In the present embodiment, the real-time position of the drag operation may be a real-time position of a finger on a touch screen of the electronic device 100, or a real-time position of a cursor of a mouse on a screen of the electronic device 100.
And S1202, determining the current position of the container according to a preset formula according to the real-time position of the dragging operation.
In this embodiment, the current position of the container corresponds to the real-time position of the drag operation, so that the background picture is displayed along the trajectory curve of the drag operation.
S1203, according to the current position, setting a positioning attribute, a left edge attribute and an upper edge attribute of the container, and setting a display attribute of the container to be visible, so as to display the background picture along a dragging track of dragging operation.
Compared with the prior art, the page element drag and drop method provided by the embodiment only needs to load the background picture into the container when drag and drop for the first time, the container is set to move along the track curve of the dragging operation, and the subsequent dragging only needs to change the CSS attribute of the container, so that the effect of displaying the background picture along the track curve of the dragging operation can be realized, repeated creation of the container and the background picture is avoided, and the browser performance is saved.
In one possible scenario, the real-time location of the drag operation includes a first abscissa and a first ordinate; step S1203 may include the following detailed steps:
first, according to the first abscissa, according to the formula
Calculating to obtain a second horizontal lineAnd coordinates, wherein X represents the second abscissa, X represents the first abscissa, and w represents the width of the container.
In this embodiment, the first abscissa and the first ordinate respectively refer to a distance from the real-time position of the drag operation to the left side of the browser window and a distance from the top of the browser window.
Second, according to the first ordinate, according to the formula
A second ordinate is calculated, wherein Y denotes the second ordinate, Y denotes the first ordinate and h denotes the height of the container.
And thirdly, obtaining the current position, wherein the current position comprises a second abscissa and a second ordinate.
Step S1204 is described in detail below, and step S1204 may include the following detailed steps:
according to the current position, the positioning attribute of the container is set to be fixed, the left edge attribute is set to be a second abscissa, the upper edge attribute is set to be a second ordinate, and the display attribute of the container is set to be visible, so that the background picture is displayed along the dragging track of the dragging operation.
In this embodiment, setting the location attribute of the container to fixed means that the CSS attribute position of the container is fixed with respect to the browser window, and setting the display attribute of the container to visible means that the CSS attribute display of the container is set to non-none to display the background picture; and then continuously refreshing the left value and the top value to display the background picture along the dragging track of the dragging operation.
On the basis of fig. 2, please refer to fig. 6, after step S130, the method may further include the following steps:
s131, judging whether the end position of the dragging operation is in the target area.
And S132, if the end position of the dragging operation is not in the target area, deleting the copy page element.
In this embodiment, deleting the copied page element refers to deleting the copied page element from the memory.
In this embodiment, specifically, the background picture in the container may be hidden by setting the CSS attribute display of the container to none.
Compared with the prior art, the embodiment has the following beneficial effects:
first, when the page element drag and drop method provided in this embodiment is used to drag and drop the page element displayed in the web page, the background during the drag and drop can be customized for some browsers that originally do not support the customized drag and drop background, so that the compatibility of the web page is improved.
Secondly, only when the background picture is dragged and dropped for the first time, the background picture is loaded into the container, the container is set to move along the track curve of the dragging operation, and the subsequent dragging only needs to change the CSS attribute of the container, so that the effect of displaying the background picture along the track curve of the dragging operation can be realized, repeated container creation is avoided, and the browser performance is saved.
Referring to fig. 7, fig. 7 is a block diagram illustrating a page element drag-and-drop apparatus 200 according to the present embodiment. The page element drag-and-drop apparatus 200 is applied to a browser in the electronic device 100, the page element drag-and-drop apparatus 200 may be a plug-in installed in the browser, and the electronic device 100 displays a webpage of the browser and stores a background picture in advance, where the background picture is self-defined. The device includes: the system comprises a creation module 201, a copy module 202, a dragging module 203, an acquisition module 204 and a display module 205.
The copy module 202 generates a copy page element of a page element in response to a long-press operation on a pre-created page element displayed in a web page, where the page element is a tab element displayed on the web page.
And the dragging module 203 is used for responding to dragging operation of the page element, which is continuous with the long-press operation, and displaying the background picture along a dragging track of the dragging operation.
The obtaining module 204 is configured to stop displaying the background picture and obtain an end position of the dragging operation when it is detected that the dragging operation is ended.
A display module 205, configured to display a copy page element in a target area if an end position of the dragging operation is within the target area that is created in advance in the web page.
Optionally, the creating module 201 is configured to:
creating a container and page elements, creating an initial area and a target area in a webpage, and setting the display attribute of the container to be invisible; displaying a page element in an initial area;
and mounting the background picture into the container to hide the background picture, wherein the background picture and the page element are positioned at the same position in the webpage.
Optionally, the dragging module 203 executes a dragging operation that is continuous with the long-press operation in response to the page element, and displays the background picture along a dragging track of the dragging operation, where the dragging operation includes:
responding to the dragging operation and acquiring the real-time position of the dragging operation;
determining the current position of the container according to a preset formula according to the real-time position of the dragging operation;
according to the current position, setting the positioning attribute, the left edge attribute and the upper edge attribute of the container, and setting the display attribute of the container to be visible so as to display the background picture along the dragging track of the dragging operation.
Optionally, the real-time position of the dragging operation includes a first abscissa and a first ordinate; the dragging module 203 executes a mode of determining the current position of the container according to a preset formula according to the real-time position of the dragging operation, including:
according to the first abscissa, according to the formula
Calculating to obtain a second abscissa, wherein X represents the second abscissa, X represents the first abscissa, and w represents the width of the container;
according to a first ordinate, according to a formula
Calculating to obtain a second ordinate, wherein Y represents the second ordinate, Y represents the first ordinate, and h represents the height of the container;
a current position is obtained, the current position including a second abscissa and a second ordinate.
Optionally, the dragging module 203 sets the positioning attribute, the left edge attribute, and the upper edge attribute of the container according to the current position, and sets the display attribute of the container to be visible, so as to display the background picture along the dragging track of the dragging operation, including:
according to the current position, setting the positioning attribute of the container to be fixed positioning, setting the left edge attribute to be a second abscissa, setting the upper edge attribute to be a second ordinate, and setting the display attribute of the container to be visible, so as to display the background picture along the dragging track of the dragging operation.
Optionally, the obtaining module 204 is further configured to:
judging whether the end position of the dragging operation is in the target area;
and if the end position of the dragging operation is not in the target area, deleting the copy page element.
Optionally, the creating module 201 executes a manner of creating a container and the page element, and creating an initial region and the target region in the web page, including:
defining a container, page elements, an initial area and a target area, and configuring parameters for the container, the page elements, the initial area and the target area;
creating a container and a page element according to the parameters;
and according to the parameters, creating an initial area and a target area, and performing layout so as to display the initial area and the target area in the webpage.
It will be apparent to those skilled in the art that the above-described specific operation of the page element drag-and-drop apparatus 200 is convenient and simple for description. Reference may be made to the corresponding process in the foregoing method embodiment, which is not described herein again.
The present embodiment also provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by the processor 102, implements the page element drag and drop method disclosed in the above embodiments.
In summary, according to the page element drag and drop method, the apparatus, the electronic device, and the storage medium provided in the embodiments of the present invention, first, a copy page element of a page element is generated in response to a long-press operation of a user on a pre-created page element displayed in a web page; then, responding to the dragging operation of the page element which is continuous with the long pressing operation, and displaying the background picture along the dragging track of the dragging operation; finally, when the end of the dragging operation is detected, stopping displaying the background picture and acquiring the end position of the dragging operation; and if the end position of the dragging operation is in a target area which is created in advance in the webpage, displaying the copied page element in the target area. Therefore, the method is applied to the browser, so that various browsers can be operated in this way, and the inconsistent limit of different browsers on the support condition of the custom background function in the prior art is eliminated; in addition, the background picture during the user-defined drag and drop can be supported, and the user-defined background picture is displayed in the dragging process.
The above description is only for the specific embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present invention are included in the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims.
Claims (10)
1. A page element drag and drop method is applied to a browser in electronic equipment, wherein the electronic equipment displays a webpage of the browser and stores a background picture in advance, and the background picture is self-defined; the method comprises the following steps:
responding to long-press operation on pre-established page elements displayed in the webpage to generate copy page elements of the page elements, wherein the page elements are label elements displayed on the webpage;
responding to the dragging operation continuous to the long pressing operation on the page element, and displaying the background picture along the dragging track of the dragging operation;
when the dragging operation is detected to be finished, acquiring the finishing position of the dragging operation, and stopping displaying the background picture;
and if the end position of the dragging operation is in a target area pre-established in the webpage, displaying the copied page element in the target area.
2. The method of claim 1, wherein prior to the step of generating a duplicate page element of the page elements in response to a long press operation on a pre-created page element displayed in the web page, the method further comprises:
creating a container and the page element, creating an initial area and the target area in the webpage, and setting the display attribute of the container to be invisible;
displaying the page element in the initial area;
and mounting the background picture into the container to hide the background picture, wherein the background picture and the page element are positioned at the same position in the webpage.
3. The method according to claim 2, wherein the step of displaying the background picture along a drag trajectory of the drag operation in response to the drag operation on the page element that is continuous with the long press operation comprises:
responding to the dragging operation and acquiring a real-time position of the dragging operation;
determining the current position of the container according to a preset formula according to the real-time position of the dragging operation;
and setting the positioning attribute, the left edge attribute and the upper edge attribute of the container according to the current position, and setting the display attribute of the container to be visible so as to display a background picture along the dragging track of the dragging operation.
4. The method of claim 3, wherein the real-time location of the drag operation comprises a first abscissa and a first ordinate; the step of determining the current position of the container according to the real-time position of the dragging operation and a preset formula comprises the following steps:
according to said first abscissa, according to a formula
Calculating a second abscissa, wherein X represents the second abscissa, X represents the first abscissa, and w represents the width of the container;
according to said first ordinate, according to a formula
Calculating to obtain a second ordinate, wherein Y represents the second ordinate, Y represents the first ordinate, and h represents the height of the container;
obtaining the current position, the current position including the second abscissa and the second ordinate.
5. The method according to claim 3, wherein the step of setting the container's positioning attribute, left edge attribute, and top edge attribute according to the current position, and setting the container's display attribute to visible to display a background picture along the drag trajectory of the drag operation comprises:
according to the current position, setting the positioning attribute of the container to be fixed positioning, setting the left edge attribute to be a second abscissa, setting the upper edge attribute to be a second ordinate, and setting the display attribute of the container to be visible, so as to display a background picture along the dragging track of the dragging operation.
6. The method according to claim 1, wherein after acquiring the end position of the drag operation, the method further comprises:
judging whether the end position of the dragging operation is in the target area;
and if the end position of the dragging operation is not in the target area, deleting the copied page element.
7. The method of claim 2, wherein the steps of creating a container and the page element, and creating an initial region and the target region in the web page, comprise:
defining a container, the page elements, an initial area and the target area, and configuring parameters for the container, the page elements, the initial area and the target area;
creating the container and the page elements according to the parameters;
and according to the parameters, creating the initial area and the target area, and performing layout to display the initial area and the target area in the webpage.
8. A page element drag and drop device is applied to a browser in electronic equipment, wherein the electronic equipment displays a webpage of the browser and displays page elements, and the page elements are label elements used for being displayed on the webpage; the electronic equipment stores a background picture in advance, and the background picture is self-defined; the device comprises:
the copying module is used for responding to long-press operation of pre-established page elements displayed in the webpage and generating copied page elements of the page elements;
the dragging module is used for responding to dragging operation continuous to the long pressing operation on the page element and displaying the background picture along a dragging track of the dragging operation;
the acquisition module is used for stopping displaying the background picture and acquiring the end position of the dragging operation when the dragging operation is detected to be ended;
and the display module is used for displaying the copied page element in a target area if the end position of the dragging operation is in the target area which is created in advance in the webpage.
9. An electronic device, characterized in that the electronic device is installed with a browser, the electronic device comprising:
one or more processors;
memory to store one or more programs that, when executed by the one or more processors, cause the one or more processors to implement the page element drag and drop method of any of claims 1-7.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out a page element drag-and-drop method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210177861.1A CN114546568A (en) | 2022-02-25 | 2022-02-25 | Page element drag and drop method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210177861.1A CN114546568A (en) | 2022-02-25 | 2022-02-25 | Page element drag and drop method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114546568A true CN114546568A (en) | 2022-05-27 |
Family
ID=81678681
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210177861.1A Pending CN114546568A (en) | 2022-02-25 | 2022-02-25 | Page element drag and drop method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114546568A (en) |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103049272A (en) * | 2012-12-28 | 2013-04-17 | 北京新媒传信科技有限公司 | Method and device for dragging controls |
| CN103177014A (en) * | 2011-12-22 | 2013-06-26 | 腾讯科技（深圳）有限公司 | Method and system for controlling interface element in webpage |
| CN103631487A (en) * | 2012-08-21 | 2014-03-12 | 腾讯科技（深圳）有限公司 | Method and device for page configuration |
| CN109992178A (en) * | 2018-01-02 | 2019-07-09 | 腾讯科技（深圳）有限公司 | Control method, device, storage medium and the electronic device of target element |
| CN111459486A (en) * | 2020-04-01 | 2020-07-28 | 杭州华望系统科技有限公司 | Graph dragging optimization method based on webpage canvas |
| CN112083867A (en) * | 2020-07-29 | 2020-12-15 | 华为技术有限公司 | Cross-device object dragging method and device |
| CN112130856A (en) * | 2020-09-29 | 2020-12-25 | 重庆紫光华山智安科技有限公司 | Method, system, medium and terminal for generating front-end visual interface with strong expansibility |
| CN112783488A (en) * | 2019-11-08 | 2021-05-11 | 腾讯科技（深圳）有限公司 | Business mode canvas drawing method and device |
| CN112965645A (en) * | 2021-03-15 | 2021-06-15 | 中国平安财产保险股份有限公司 | Page dragging method and device, computer equipment and storage medium |
| CN113552987A (en) * | 2021-04-20 | 2021-10-26 | 华为技术有限公司 | Graphical interface display method, electronic device, medium, and program product |
-
2022
- 2022-02-25 CN CN202210177861.1A patent/CN114546568A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103177014A (en) * | 2011-12-22 | 2013-06-26 | 腾讯科技（深圳）有限公司 | Method and system for controlling interface element in webpage |
| CN103631487A (en) * | 2012-08-21 | 2014-03-12 | 腾讯科技（深圳）有限公司 | Method and device for page configuration |
| CN103049272A (en) * | 2012-12-28 | 2013-04-17 | 北京新媒传信科技有限公司 | Method and device for dragging controls |
| CN109992178A (en) * | 2018-01-02 | 2019-07-09 | 腾讯科技（深圳）有限公司 | Control method, device, storage medium and the electronic device of target element |
| CN112783488A (en) * | 2019-11-08 | 2021-05-11 | 腾讯科技（深圳）有限公司 | Business mode canvas drawing method and device |
| CN111459486A (en) * | 2020-04-01 | 2020-07-28 | 杭州华望系统科技有限公司 | Graph dragging optimization method based on webpage canvas |
| CN112083867A (en) * | 2020-07-29 | 2020-12-15 | 华为技术有限公司 | Cross-device object dragging method and device |
| CN112130856A (en) * | 2020-09-29 | 2020-12-25 | 重庆紫光华山智安科技有限公司 | Method, system, medium and terminal for generating front-end visual interface with strong expansibility |
| CN112965645A (en) * | 2021-03-15 | 2021-06-15 | 中国平安财产保险股份有限公司 | Page dragging method and device, computer equipment and storage medium |
| CN113552987A (en) * | 2021-04-20 | 2021-10-26 | 华为技术有限公司 | Graphical interface display method, electronic device, medium, and program product |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20150012818A1 (en) | System and method for semantics-concise interactive visual website design | |
| US9756140B2 (en) | Tracking user behavior relative to a network page | |
| CA2712925C (en) | Editing a document using a transitory editing surface | |
| US8645849B2 (en) | Method and apparatus for providing portioned web pages in a graphical user interface | |
| JP6133318B2 (en) | Cross window animation | |
| CN102117290B (en) | Method and system used for showing page elements in webpage | |
| WO2008154120A1 (en) | Creating web clips | |
| US20050114791A1 (en) | Cueing mechanism that indicates a display is able to be scrolled | |
| CN107608668B (en) | Method and device for making and compatibly displaying H5 page, terminal equipment and storage medium | |
| US9792268B2 (en) | Zoomable web-based wall with natural user interface | |
| US20190012821A1 (en) | Displaying images associated with apps based on app processing task progress statuses | |
| CN109656445B (en) | Content processing method, device, terminal and storage medium | |
| US9910835B2 (en) | User interface for creation of content works | |
| CN110489041B (en) | Method, device, equipment and medium for automatically aligning small program dragging elements | |
| WO2014067442A1 (en) | Page browsing method and browser | |
| JP2002251241A (en) | Information display method and information processor using the same method and medium and program | |
| CN114357345A (en) | Picture processing method and device, electronic equipment and computer readable storage medium | |
| US9720566B1 (en) | Management of user interface elements | |
| CN111209503B (en) | Processing method and device for popup window in webpage, electronic equipment and storage medium | |
| CN114546568A (en) | Page element drag and drop method and device, electronic equipment and storage medium | |
| KR101294458B1 (en) | Apparatus and method of inputting text in mobile device | |
| CN112667931B (en) | Webpage collecting method, electronic equipment and storage medium | |
| CN107025038B (en) | List operation method and device | |
| CN115220628B (en) | Element dragging method and device, electronic equipment and storage medium | |
| CN118227250B (en) | Toolbar display method and device in page, computer 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 |