CN115098216A - Element dragging matching method based on midpoint distance judgment - Google Patents
Element dragging matching method based on midpoint distance judgment Download PDFInfo
- Publication number
- CN115098216A CN115098216A CN202210863989.3A CN202210863989A CN115098216A CN 115098216 A CN115098216 A CN 115098216A CN 202210863989 A CN202210863989 A CN 202210863989A CN 115098216 A CN115098216 A CN 115098216A
- Authority
- CN
- China
- Prior art keywords
- data
- elements
- hot
- area
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 33
- 238000013499 data model Methods 0.000 claims abstract description 11
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000006073 displacement reaction Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
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 invention relates to the technical field of webpage element dragging, discloses an element dragging matching method based on midpoint distance judgment, and aims to solve the problems of difficult data compatibility and poor element dragging and moving performance, and the scheme mainly comprises the following steps: setting a fixed area and a draggable area during front-end basic layout; when background data is established, establishing a data model aiming at draggable front-end elements; executing a dragging and moving process; in the draggable area, container elements at fixed positions are arranged as hot area containers; acquiring hot area elements corresponding to the hot area containers, and storing the hot area elements into a hot area container set in background data; and in the process of dragging and moving the front-end element, judging whether a container of the current dragged element is intersected with the hot area element in the hot area container set or not based on the distance of the central point, and if so, performing corresponding matching operation. The invention solves the problem of difficult data compatibility and improves the element dragging and moving performance.
Description
Technical Field
The invention relates to the technical field of webpage element dragging, in particular to an element dragging matching method based on midpoint distance judgment.
Background
In recent years, with the comprehensive popularization and deepening of education reform, the application of the internet in teaching is increasingly wide, the body shadow of various internet + products can be seen everywhere in the education industry, teaching auxiliary products are more various and vivid, the interactive optimization of element operation in the products is always the focus of attention of product designers, however, the dragging and matching operation of a PC client and a webpage has no mature and universal implementation method, the PC client and the webpage are always required to be respectively subjected to logic implementation of different platforms and different development languages, and along with the non-universality of the implementation method, the problems of the compatibility and the complexity of different platform data and the like often occur. And the element dragging and moving performance is poor due to high data change frequency in the element operation process.
Disclosure of Invention
The invention aims to provide an element dragging matching method based on midpoint distance judgment, so as to solve the problem of difficult data compatibility caused by non-uniformity of dragging operations of elements of different platforms and hot zone realization logics, optimize element dragging moving performance and solve the problem of complicated hot zone realization logics.
The technical scheme adopted by the invention for solving the technical problems is as follows:
the element dragging matching method based on midpoint distance judgment comprises the following steps:
step 1, setting a fixed area of data corresponding to an element position, a fixed area of data dynamic change corresponding to the element position and a draggable area of the data dynamic change corresponding to the element position during front-end basic layout;
step 2, when establishing background data, establishing a data model aiming at draggable front-end elements, wherein the data model can modify the values of front-end attributes through a response type principle, and the front-end attributes at least comprise positioning attributes of the front-end elements;
and 3, executing a dragging and moving process: recording the initial position of a mouse pointer after the front-end element is clicked by the mouse pointer, recording the current position of the mouse pointer after the front-end element moves to the current position and is released, calculating the current positioning data of the front-end element according to the initial position and the current position of the mouse pointer and the original positioning attribute of the front-end element, writing the current positioning data into a data model, and changing the position of the front-end element through data response;
step 4, in the draggable area, container elements with fixed positions are distributed as hot area containers, and data corresponding to the positioning attributes of the hot area containers are fixed data;
step 5, acquiring hot area elements corresponding to the hot area containers, and storing the hot area elements into a hot area container set in background data, wherein unique marks for positioning the elements are arranged in the hot area container set;
and 6, judging whether a container of the current dragged element is intersected with the hot area elements in the hot area container set or not based on the distance of the central point in the dragging and moving process of the front end element, and if so, performing corresponding matching operation.
Further, the determining whether the container of the currently dragged element intersects with the hot zone element in the hot zone container set based on the center point distance specifically includes:
determining first center point coordinates and first width and height data corresponding to all hot zone elements in a hot zone container set, and storing the first center point coordinates and the first width and height data into a hot zone positioning set, wherein the hot zone positioning set is internally provided with a unique mark which is the same as that of the hot zone container set;
and determining a second central point coordinate and second width and height data corresponding to the current dragged element, circularly traversing the hot area positioning set according to the unique mark, and judging whether the container of the current dragged element is intersected with the hot area elements in the hot area container set or not according to the first central point coordinate, the first width and height data, the second central point coordinate and the second width and height data.
Further, the determining, according to the first center point coordinate, the first width and height data, the second center point coordinate, and the second width and height data, whether the container of the currently dragged element intersects with the hot zone element in the hot zone container set specifically includes:
and if the absolute value of the difference between the abscissa of the first central point coordinate and the second central point coordinate is less than half of the sum of the widths of the first width and height data and the second width and height data, and the absolute value of the difference between the ordinate of the first central point coordinate and the second central point coordinate is less than half of the sum of the heights of the first width and height data and the second width and height data, judging that the container of the current drag element is intersected with the hot zone elements in the hot zone container set.
Further, the formula for calculating the current positioning data of the front-end element is as follows:
the current location data of the front-end element is (the current location of the mouse pointer-the initial location of the mouse pointer) + the original location attribute of the front-end element.
Further, step 4 is preceded by:
and judging whether redundancy exists in the interface layout, and if so, clearing the redundancy.
The beneficial effects of the invention are: the element dragging matching method based on the midpoint distance judgment can realize the displacement of the elements through specific layout without using a fixed element container. And the interface refresh rate is reduced through the conversion of the intermediate data, and the element moving performance is improved. Meanwhile, the invention judges whether the element touches the hot area or not based on the midpoint distance, thereby effectively solving the problem of difficult data compatibility caused by non-uniform dragging operation of different platform elements and the realization logic of the hot area.
Drawings
Fig. 1 is a schematic flowchart of an element dragging matching method based on midpoint distance determination according to an embodiment of the present invention.
Detailed Description
Embodiments of the present invention will be described in detail below with reference to the accompanying drawings.
The invention provides an element dragging matching method based on midpoint distance judgment, which comprises the following parts of front-end interface basic layout, background data establishment, dragging logic implementation, specific area setting, hot area logic implementation, special operation implementation and the like. As shown in fig. 1, the method mainly comprises the following steps:
step 1, setting a fixed area of data corresponding to an element position, a fixed area of data dynamic change corresponding to the element position and a draggable area of the data dynamic change corresponding to the element position during front-end basic layout;
in the embodiment, when the draggable region is laid out, the container is set to be positioned by the internal elements through coordinates, and the origin of the coordinates is the top left corner vertex of the container.
Step 2, when establishing background data, establishing a data model aiming at draggable front-end elements, wherein the data model can modify the values of front-end attributes through a response type principle, and the front-end attributes at least comprise positioning attributes of the front-end elements;
in this embodiment, the positioning attribute further includes information such as a width, a height, and a coordinate point corresponding to the front-end element. The displacement of the front-end element is changed through element positioning, data corresponding to the positioning attribute is bound with a data model of the background through a data response type principle, and when the background resets the data to an initial state, the element is reset.
With the more and more deep application of the data response type concept on each platform, the excellent framework based on the concept develops rapidly, for example, the vue.js and exact.js frameworks of the webpage end and the WPF framework of the PC client are response type frameworks based on the MVVM architecture mode, the application of the unified concept and the architecture mode on different platforms makes the general element operation logic become a solution which can be realized. The embodiment modifies the front-end attribute based on the data response type principle, and effectively solves the problem of difficult data compatibility caused by non-uniformity of dragging operation of different platform elements and hot zone realization logic.
And 3, executing a dragging and moving process: recording the initial position of a mouse pointer after the front-end element is clicked by the mouse pointer, recording the current position of the mouse pointer after the front-end element moves to the current position and is released, calculating the current positioning data of the front-end element according to the initial position and the current position of the mouse pointer and the original positioning attribute of the front-end element, writing the current positioning data into a data model, and changing the position of the front-end element through data response;
in this embodiment, when a dragging and moving process is executed, a corresponding temp attribute is set based on the type of the element model, and the current position of the mouse pointer is recorded through the temp attribute. The initial position and the current position of the mouse pointer and the original positioning attribute of the front-end element calculate the current positioning data of the front-end element according to the following formula:
the current location data of the front-end element is (the current location of the mouse pointer-the initial location of the mouse pointer) + the original location attribute of the front-end element.
In this embodiment, in order to facilitate the next drag movement operation, all intermediate data are reset after the current drag movement operation is completed. Meanwhile, in order to avoid the influence of redundancy on the judgment of subsequent hot areas, the embodiment also cleans the redundancy when the redundancy exists in the interface layout so as to improve the accuracy of hot area judgment.
Step 4, in the draggable area, container elements with fixed positions are distributed as hot area containers, and data corresponding to the positioning attributes of the hot area containers are fixed data;
the fixed data refers to data that does not change with operations such as dragging.
Step 5, acquiring hot area elements corresponding to the hot area containers, and storing the hot area elements into a hot area container set in background data, wherein unique marks for positioning the elements are arranged in the hot area container set;
specifically, after the hotspot location is determined, hotspot elements can be obtained in the background logic by a specific method, put into a hotspot container set in the background data, and a unique mark can be set in the set to position the elements, such as by using index positioning.
And 6, judging whether the container of the currently dragged element is intersected with the hot area elements in the hot area container set or not based on the distance of the central point in the process of dragging and moving the front end element, and if so, performing corresponding matching operation.
In this embodiment, determining whether the container of the currently dragged element intersects with the hot zone element in the hot zone container set based on the distance between the center points specifically includes:
step 61, determining first center point coordinates and first width and height data corresponding to all hot zone elements in a hot zone container set, and storing the first center point coordinates and the first width and height data into a hot zone positioning set, wherein the hot zone positioning set is internally provided with a unique mark which is the same as that of the hot zone container set;
and step 62, determining a second center point coordinate and second width and height data corresponding to the current dragged element, circularly traversing the hot area positioning set according to the unique mark, and judging whether the container of the current dragged element is intersected with the hot area elements in the hot area container set according to the first center point coordinate, the first width and height data, the second center point coordinate and the second width and height data.
The method for acquiring the midpoint and width and height data by different development platforms and languages is different, and the method for acquiring the midpoint of the element by JavaScript is as follows: the left offset (up offset) of an element) + half the width (height) of an element is the abscissa (ordinate) of the center point of the element.
In this embodiment, in the process of dragging and moving the front-end element, based on the determination method of the center point distance, the center point coordinates and the width and height data corresponding to each unique mark in the hot-area positioning set are cyclically traversed, and whether each of the first center point coordinates and the first width and height data meets the condition with the second center point coordinates and the second width and height data corresponding to the currently dragged element is respectively determined. Specifically, if the absolute value of the difference between the abscissa of the first center point coordinate and the second center point coordinate is less than half of the sum of the widths of the first width and height data and the absolute value of the difference between the ordinate of the first center point coordinate and the second center point coordinate is less than half of the sum of the heights of the first width and height data and the second width and height data, it is determined that the container of the currently dragged element intersects with the hot zone elements in the hot zone container set.
And when the container of the current dragged element is judged to be intersected with the hot zone elements in the hot zone container set, displaying or performing other corresponding operations on the hot zone, so as to realize the purpose of element matching on the interface.
In summary, according to the method for matching dragging an element based on midpoint distance determination described in this embodiment, through a specific layout, the element can be displaced without using a fixed element container, and a draggable region is set as a specific container to achieve the purpose of region division. And the interface refresh rate is reduced through the conversion of the intermediate data, and the element moving performance is improved. Meanwhile, the embodiment judges whether the element touches the hot area or not based on the midpoint distance, and effectively solves the problem of difficult data compatibility caused by non-uniform logic between the dragging operation of different platform elements and the realization of the hot area.
Claims (5)
1. The element dragging matching method based on midpoint distance judgment is characterized by comprising the following steps of:
step 1, setting a fixed area of data corresponding to an element position, a fixed area of data dynamic change corresponding to the element position and a draggable area of the data dynamic change corresponding to the element position during front-end basic layout;
step 2, when establishing background data, establishing a data model aiming at draggable front-end elements, wherein the data model can modify the values of front-end attributes through a response type principle, and the front-end attributes at least comprise positioning attributes of the front-end elements;
and 3, executing a dragging and moving process: recording the initial position of a mouse pointer after the front-end element is clicked by the mouse pointer, recording the current position of the mouse pointer after the front-end element moves to the current position and is released, calculating the current positioning data of the front-end element according to the initial position and the current position of the mouse pointer and the original positioning attribute of the front-end element, writing the current positioning data into a data model, and changing the position of the front-end element through data response;
step 4, in the draggable area, container elements with fixed positions are distributed as hot area containers, and data corresponding to the positioning attributes of the hot area containers are fixed data;
step 5, acquiring hot area elements corresponding to the hot area containers, and storing the hot area elements into a hot area container set in background data, wherein unique marks for positioning the elements are arranged in the hot area container set;
and 6, judging whether the container of the currently dragged element is intersected with the hot area elements in the hot area container set or not based on the distance of the central point in the process of dragging and moving the front end element, and if so, performing corresponding matching operation.
2. The method for element drag matching based on midpoint distance determination according to claim 1, wherein the determining whether the container of the currently dragged element intersects with the hot zone elements in the hot zone container set based on the midpoint distance specifically includes:
determining first center point coordinates and first width and height data corresponding to all hot zone elements in a hot zone container set, and storing the first center point coordinates and the first width and height data into a hot zone positioning set, wherein the hot zone positioning set is internally provided with a unique mark which is the same as that of the hot zone container set;
and determining a second center point coordinate and second width and height data corresponding to the current dragging element, circularly traversing the hot area positioning set according to the unique mark, and judging whether the container of the current dragging element is intersected with the hot area elements in the hot area container set or not according to the first center point coordinate, the first width and height data, the second center point coordinate and the second width and height data.
3. The method for matching dragging an element based on midpoint distance determination of claim 2, wherein the determining whether the container of the currently dragged element intersects with the hot zone element in the hot zone container set according to the first center point coordinate, the first width and height data, the second center point coordinate, and the second width and height data specifically comprises:
and if the absolute value of the difference between the abscissa of the first central point coordinate and the second central point coordinate is less than half of the sum of the widths of the first width and height data and the second width and height data, and the absolute value of the difference between the ordinate of the first central point coordinate and the second central point coordinate is less than half of the sum of the heights of the first width and height data and the second width and height data, judging that the container of the current drag element is intersected with the hot zone elements in the hot zone container set.
4. The method for matching element drag based on midpoint distance determination of claim 1, wherein the formula for calculating the current location data of the front-end element is:
the current location data of the front-end element is (the current location of the mouse pointer-the initial location of the mouse pointer) + the original location attribute of the front-end element.
5. The method for matching element drag determined based on midpoint distance according to claim 1, wherein the step 4 is preceded by the steps of:
and judging whether redundancy exists in the interface layout, and if so, clearing the redundancy.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210863989.3A CN115098216B (en) | 2022-07-21 | 2022-07-21 | Element dragging matching method based on midpoint distance judgment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210863989.3A CN115098216B (en) | 2022-07-21 | 2022-07-21 | Element dragging matching method based on midpoint distance judgment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115098216A true CN115098216A (en) | 2022-09-23 |
| CN115098216B CN115098216B (en) | 2024-04-23 |
Family
ID=83298117
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210863989.3A Active CN115098216B (en) | 2022-07-21 | 2022-07-21 | Element dragging matching method based on midpoint distance judgment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115098216B (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20070079858A (en) * | 2006-02-03 | 2007-08-08 | 유주영 | Method for implementing drag operation using touchpad |
| CN103164191A (en) * | 2011-12-08 | 2013-06-19 | 腾讯科技（深圳）有限公司 | Method and device of webpage element dragging |
| CN113535164A (en) * | 2021-06-11 | 2021-10-22 | 中电金信软件有限公司 | Front-end interface generation method and device, electronic equipment and storage medium |
| CN114637506A (en) * | 2022-03-23 | 2022-06-17 | 中国平安人寿保险股份有限公司 | Grid layout method, device, equipment and storage medium based on artificial intelligence |
-
2022
- 2022-07-21 CN CN202210863989.3A patent/CN115098216B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20070079858A (en) * | 2006-02-03 | 2007-08-08 | 유주영 | Method for implementing drag operation using touchpad |
| CN103164191A (en) * | 2011-12-08 | 2013-06-19 | 腾讯科技（深圳）有限公司 | Method and device of webpage element dragging |
| CN113535164A (en) * | 2021-06-11 | 2021-10-22 | 中电金信软件有限公司 | Front-end interface generation method and device, electronic equipment and storage medium |
| CN114637506A (en) * | 2022-03-23 | 2022-06-17 | 中国平安人寿保险股份有限公司 | Grid layout method, device, equipment and storage medium based on artificial intelligence |
Non-Patent Citations (1)
| Title |
|---|
| 戚利娜;: "基于JavaScript的网页元素拖拽功能的实现", 福建电脑, no. 02, 25 February 2017 (2017-02-25) * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115098216B (en) | 2024-04-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106155644B (en) | Webpage focal point control implementation method suitable for smart television browser | |
| CN104965947B (en) | A kind of bridge three-dimensional design method based on BIM technology | |
| CN107526526B (en) | Method and device for determining pressure-sensitive handwriting area | |
| CN104703044A (en) | Picture barrage publishing method | |
| CN102915375A (en) | Webpage loading method based on layout zoning | |
| CN106023279A (en) | Curve drawing method and system | |
| CN106326565B (en) | Method for rapidly converting three-dimensional design engineering drawing | |
| CN102473319A (en) | Animation control device, animation control method and animation control program | |
| CN107748639A (en) | A kind of edit methods of curve, device, equipment and storage medium | |
| CN113096147B (en) | MATLAB-based automatic laser marking shadow generation method | |
| CN106874610A (en) | A kind of sloping core earth and rockfill dam modeling method based on VB and CATIA | |
| CN112100296B (en) | GIS system convenient to carry out GIS vector data editing | |
| CN102141879B (en) | Information processing apparatus and information processing method | |
| CN102201128A (en) | Method and device for transforming pipe models | |
| CN112562032A (en) | Method and device for efficiently drawing industrial control network topological graph | |
| CN106162302A (en) | Method of combination, device and the intelligent television at the main interface of a kind of Launcher | |
| CN104423632A (en) | Method and system for positioning electronic pen | |
| CN105045571A (en) | Novel WebGIS architecture | |
| CN115098216A (en) | Element dragging matching method based on midpoint distance judgment | |
| CN101996309B (en) | Method and relevant device for identifying and transforming stroke contour | |
| CN107168633B (en) | A kind of gesture interaction query event construction method based on data dependence | |
| CN106951166A (en) | Person's handwriting method for drafting and device | |
| JP5923604B2 (en) | Method and system for generating instructions in accordance with changes in font outline | |
| CN105988703A (en) | Business object display method and apparatus | |
| CN105094629A (en) | Grid-based self-adaptation layout method and system |
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 | ||
| GR01 | Patent grant |