CN115098216B - Element dragging matching method based on midpoint distance judgment - Google Patents
Element dragging matching method based on midpoint distance judgment Download PDFInfo
- Publication number
- CN115098216B CN115098216B CN202210863989.3A CN202210863989A CN115098216B CN 115098216 B CN115098216 B CN 115098216B CN 202210863989 A CN202210863989 A CN 202210863989A CN 115098216 B CN115098216 B CN 115098216B
- Authority
- CN
- China
- Prior art keywords
- hot zone
- data
- center point
- container
- current
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 34
- 238000013499 data model Methods 0.000 claims abstract description 11
- 238000004140 cleaning Methods 0.000 claims description 2
- 238000006243 chemical reaction Methods 0.000 description 3
- 238000006073 displacement reaction Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
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, and discloses an element dragging matching method based on midpoint distance judgment, aiming at solving the problems of difficult data compatibility and poor element dragging movement performance, wherein the scheme mainly comprises the following steps: setting a fixed area and a draggable area when the front end is arranged in a basic layout; when background data is built, a data model is built aiming at the draggable front-end element; executing a drag and move process; laying out a container element with a fixed position as a hot zone container in the draggable area; acquiring hot zone elements corresponding to the hot zone containers, and storing the hot zone elements into a hot zone container set in background data; and judging whether the container of the current dragging element is intersected with the hot zone elements in the hot zone container set or not based on the center point distance in the process that the front end element is dragged and moved, and if so, performing corresponding matching operation. The invention solves the problem of difficult data compatibility and improves the dragging and moving performance of elements.
Description
Technical Field
The invention relates to the technical field of web page element dragging, in particular to an element dragging matching method based on midpoint distance judgment.
Background
In recent years, with the comprehensive popularization and continuous deepening of education reform, the application of the Internet in teaching is wider and wider, the education industry can see the figures and shadows of various Internet plus products everywhere, teaching auxiliary products are more various and all the more comprehensive, interactive optimization of element operation in the products is always a focus of attention of product designers, however, the dragging matching operation of a PC client and a webpage is always not a relatively mature and universal implementation method, and the PC client and the webpage always need to be logically implemented in different platforms and different development languages respectively, so that the problems of complex data compatibility of different platforms and the like occur due to the fact that the implementation method is not universal. 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-uniform element dragging operation of different platforms and logic realization of a hot zone, optimize element dragging movement performance and solve the problem of complex logic realization of the hot zone.
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 corresponding to data and element positions, a fixed area corresponding to data dynamic change and element positions and a draggable area corresponding to data dynamic change and element positions when front end groups are laid out;
Step 2, when background data are built, a data model is built aiming at the draggable front-end element, the data model can modify the value of the front-end attribute through a responsive principle, and the front-end attribute at least comprises the positioning attribute of the front-end element;
Step 3, executing a dragging and moving process: after the current end element is clicked by the mouse pointer, the initial position of the mouse pointer is recorded, after the current end element moves to the current position and is released, the current position of the mouse pointer is recorded, the current positioning data of the front end element is calculated according to the initial position and the current position of the mouse pointer and the original positioning attribute of the front end element, the current positioning data is written into a data model, and the front end attribute changes in position through data response;
step 4, in the draggable areas, arranging container elements at fixed positions as hot zone containers, wherein data corresponding to positioning attributes of the hot zone containers are fixed data;
step 5, obtaining hot zone elements corresponding to the hot zone containers, and storing the hot zone elements into a hot zone container set in background data, wherein unique marks for positioning the elements are arranged in the hot zone container set;
And 6, judging whether the container of the current dragging element is intersected with the hot zone elements in the hot zone container set or not based on the center point distance in the dragging and moving process of the front end element, and if so, performing corresponding matching operation.
Further, the determining, based on the center point distance, whether the container of the current dragging element intersects with the hot zone element in the hot zone container set specifically includes:
Determining first center point coordinates and first width and height data corresponding to all the hot zone elements in the 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 identical to the hot zone container set;
Determining a second center point coordinate and second width and height data corresponding to the current dragging element, circularly traversing the hot zone positioning set according to the unique mark, and judging whether a container of the current dragging element is intersected with a 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.
Further, the determining whether the container of the current dragging element intersects with the hot zone element in the hot zone container set according to the first center point coordinate, the first width-height data, the second center point coordinate and the second width-height data specifically includes:
And if the absolute value of the difference between the first center point coordinate and the abscissa in the second center point coordinate is smaller than half of the sum of the widths in the first wide-height data and the second wide-height data, and the absolute value of the difference between the first center point coordinate and the ordinate in the second center point coordinate is smaller than half of the sum of the heights in the first wide-height data and the second wide-height data, judging that the container of the current dragging element intersects with the hot area element in the hot area container set.
Further, the formula for calculating the current positioning data of the front-end element is as follows:
current positioning data of the front element= (current position of mouse pointer-initial position of mouse pointer) +original positioning attribute of the front element.
Further, before the step 4, the method further includes:
Judging whether the interface layout has redundancy, if so, cleaning the redundancy.
The beneficial effects of the invention are as follows: according to the element dragging matching method based on midpoint distance judgment, through specific layout, displacement of elements can be realized without using a fixed element container. And interface refresh rate is reduced through the conversion of intermediate data, and element movement performance is improved. Meanwhile, whether the element touches the hot zone is judged based on the midpoint distance, so that the problem of difficult data compatibility caused by non-uniform logic between dragging operation of elements of different platforms and realization of the hot zone is effectively solved.
Drawings
Fig. 1 is a flow chart of an element drag matching method based on midpoint distance judgment 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 element dragging matching method based on midpoint distance judgment comprises the following parts of front end interface basic layout, background data establishment, dragging logic implementation, specific area setting, hot zone 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 corresponding to data and element positions, a fixed area corresponding to data dynamic change and element positions and a draggable area corresponding to data dynamic change and element positions when front end groups are laid out;
in the embodiment, when the draggable area is laid out, the container is set so that the internal element is positioned by coordinates, and the origin of the coordinates is the top left corner vertex of the container.
Step 2, when background data are built, a data model is built aiming at the draggable front-end element, the data model can modify the value of the front-end attribute through a responsive principle, and the front-end attribute at least comprises the positioning attribute of the front-end element;
In this embodiment, the positioning attribute further includes information such as width, height, coordinate points, and the like 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 reset data is in an initial state, the element is reset.
With the deeper and deeper application of the data response type concept on each platform, excellent frameworks based on the concept develop rapidly, such as a vue.js and a reaction.js framework at a webpage end, and a WPF framework at a PC client is a response type framework based on an MVVM architecture mode, and the application of the unified concept and the architecture mode on different platforms enables universal element operation logic to be a realizable solution. The embodiment modifies the front-end attribute based on the data response principle, and effectively solves the problem of difficult data compatibility caused by non-uniform logic between dragging operation of different platform elements and realization of a hot zone.
Step 3, executing a dragging and moving process: after the current end element is clicked by the mouse pointer, the initial position of the mouse pointer is recorded, after the current end element moves to the current position and is released, the current position of the mouse pointer is recorded, the current positioning data of the front end element is calculated according to the initial position and the current position of the mouse pointer and the original positioning attribute of the front end element, the current positioning data is written into a data model, and the front end attribute changes in position through data response;
When the drag movement process is executed, the embodiment sets the corresponding temp attribute based on the type of the element model, and records the current position of the mouse pointer through the temp attribute. The formula for calculating the current positioning data of the front element according to the initial position and the current position of the mouse pointer and the original positioning attribute of the front element is as follows:
current positioning data of the front element= (current position of mouse pointer-initial position of mouse pointer) +original positioning attribute of the front element.
In this embodiment, in order to facilitate the execution of the next drag movement operation, after the current drag movement operation is completed, all the intermediate data are reset. Meanwhile, in order to avoid redundancy from affecting the judgment of the subsequent hot zone, when redundancy exists in the interface layout, the embodiment also cleans the redundancy so as to improve the accuracy of the judgment of the hot zone.
Step 4, in the draggable areas, arranging container elements at fixed positions as hot zone containers, wherein data corresponding to positioning attributes of the hot zone containers are fixed data;
the fixed data is data which does not change with operations such as dragging.
Step 5, obtaining hot zone elements corresponding to the hot zone containers, and storing the hot zone elements into a hot zone container set in background data, wherein unique marks for positioning the elements are arranged in the hot zone container set;
Specifically, after the hot zone position is determined, the hot zone elements can be acquired in the background logic through a specific method, and the hot zone elements are put into a hot zone container set in the background data, wherein unique marks can be set in the set to position the elements, such as index positioning.
And 6, judging whether the container of the current dragging element is intersected with the hot zone elements in the hot zone container set or not based on the center point distance in the dragging and moving process of the front end element, and if so, performing corresponding matching operation.
In this embodiment, determining whether the container of the current drag element intersects with the hot zone element in the hot zone container set based on the center point distance specifically includes:
step 61, determining first center point coordinates and first width and height data corresponding to all the hot zone elements in the 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 identical to the hot zone container set;
And step 62, determining a second center point coordinate and second width and height data corresponding to the current dragging element, circularly traversing the hot zone positioning set according to the unique mark, and judging whether the container of the current dragging element is intersected 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.
Wherein, different development platforms are different from the method for acquiring midpoint and width and height data by language, and the method for acquiring the center point of the element by JavaScript is as follows: the left offset (up offset) of an element) + half the width (height) of the element is the abscissa (ordinate) of the element center point.
In the process of dragging and moving the front-end element, the embodiment circularly traverses the center point coordinates and the width and height data corresponding to each unique mark in the hot zone positioning set based on the judgment method of the center point distance, and judges whether each first center point coordinate and each first width and height data and the second center point coordinate and the second width and height data corresponding to the current dragging element meet the condition or not respectively. Specifically, if the absolute value of the difference between the first center point coordinate and the abscissa in the second center point coordinate is smaller than half of the sum of the widths in the first wide-height data and the second wide-height data, and the absolute value of the difference between the first center point coordinate and the ordinate in the second center point coordinate is smaller than half of the sum of the heights in the first wide-height data and the second wide-height data, then it is determined that the container of the current dragging element intersects with the hot zone element in the hot zone container set.
When the container of the current dragging element is judged to be intersected with the hot zone elements in the hot zone container set, the hot zone is displayed or other corresponding operations are made, and therefore the purpose of element matching on the interface is achieved.
In summary, according to the element dragging matching method based on midpoint distance determination in the embodiment, displacement of elements can be realized without using a fixed element container through a specific layout, and the draggable area is set as a specific container to achieve the purpose of area division. And interface refresh rate is reduced through the conversion of intermediate data, and element movement performance is improved. Meanwhile, the embodiment judges whether the element touches the hot zone based on the midpoint distance, and effectively solves the problem of difficult data compatibility caused by non-uniform logic between dragging operation of elements of different platforms and realization of the hot zone.
Claims (4)
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 corresponding to data and element positions, a fixed area corresponding to data dynamic change and element positions and a draggable area corresponding to data dynamic change and element positions when front end groups are laid out;
Step 2, when background data are built, a data model is built aiming at the draggable front-end element, the data model can modify the value of the front-end attribute through a responsive principle, and the front-end attribute at least comprises the positioning attribute of the front-end element;
Step 3, executing a dragging and moving process: after the current end element is clicked by the mouse pointer, the initial position of the mouse pointer is recorded, after the current end element moves to the current position and is released, the current position of the mouse pointer is recorded, the current positioning data of the front end element is calculated according to the initial position and the current position of the mouse pointer and the original positioning attribute of the front end element, the current positioning data is written into a data model, and the front end attribute changes in position through data response;
step 4, in the draggable areas, arranging container elements at fixed positions as hot zone containers, wherein data corresponding to positioning attributes of the hot zone containers are fixed data;
step 5, obtaining hot zone elements corresponding to the hot zone containers, and storing the hot zone elements into a hot zone container set in background data, wherein unique marks for positioning the elements are arranged in the hot zone container set;
Step 6, judging whether a container of the current dragging element is intersected with a hot zone element in a hot zone container set or not based on the center point distance in the process that the front end element is dragged and moved, and if so, performing corresponding matching operation;
judging whether the container of the current dragging element is intersected with the hot zone element in the hot zone container set or not based on the center point distance, wherein the method specifically comprises the following steps of:
Determining first center point coordinates and first width and height data corresponding to all the hot zone elements in the 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 identical to the hot zone container set;
Determining a second center point coordinate and second width and height data corresponding to the current dragging element, circularly traversing the hot zone positioning set according to the unique mark, and judging whether a container of the current dragging element is intersected with a 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.
2. The method for matching element drag based on midpoint distance determination according to claim 1, wherein determining whether the container of the current drag element intersects with the hot zone element in the hot zone container set according to the first center point coordinate, the first width-height data, the second center point coordinate, and the second width-height data specifically comprises:
And if the absolute value of the difference between the first center point coordinate and the abscissa in the second center point coordinate is smaller than half of the sum of the widths in the first wide-height data and the second wide-height data, and the absolute value of the difference between the first center point coordinate and the ordinate in the second center point coordinate is smaller than half of the sum of the heights in the first wide-height data and the second wide-height data, judging that the container of the current dragging element intersects with the hot area element in the hot area container set.
3. The method for matching element drag based on midpoint distance determination according to claim 1, wherein the formula for calculating the current positioning data of the front-end element is:
current positioning data of the front element= (current position of mouse pointer-initial position of mouse pointer) +original positioning attribute of the front element.
4. The method for matching element drag based on midpoint distance determination according to claim 1, wherein the step 4 further comprises:
Judging whether the interface layout has redundancy, if so, cleaning 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 CN115098216A (en) | 2022-09-23 |
| CN115098216B true 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的网页元素拖拽功能的实现;戚利娜;;福建电脑;20170225(第02期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115098216A (en) | 2022-09-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102915375B (en) | A kind of webpage loading method based on layout subregion | |
| CN106155644B (en) | Webpage focal point control implementation method suitable for smart television browser | |
| CN104703044A (en) | Picture barrage publishing method | |
| US8595662B1 (en) | Methods, systems, and articles of manufacture for implementing a physical design of an electronic circuit with automatic snapping | |
| CN101763234B (en) | Method and device for simulating various screen resolutions | |
| CN102141879B (en) | Information processing apparatus and information processing method | |
| CN102184101B (en) | Software application frame and development system thereof for smartphones | |
| CN101937315A (en) | Multi-screen display operation control system and method | |
| CN108664461A (en) | A kind of web form Auto-writing method and device | |
| CN103942053A (en) | Three-dimensional model gesture touch browsing interaction method based on mobile terminal | |
| 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 | |
| CN101470570B (en) | System and method for moving web page reports | |
| CN103106306B (en) | A kind of cooling tower water distribution system modeling method | |
| CN102509510A (en) | Interactive automatically updating method for legend content of electronic map | |
| CN103455262A (en) | Pen-based interaction method and system based on mobile computing platform | |
| CN112562032A (en) | Method and device for efficiently drawing industrial control network topological graph | |
| CN115098216B (en) | Element dragging matching method based on midpoint distance judgment | |
| CN103077025B (en) | A kind of closed geometry figure is wiped trajectory and is generated the method for new trajectory | |
| CN105045571A (en) | Novel WebGIS architecture | |
| CN101996309B (en) | Method and relevant device for identifying and transforming stroke contour | |
| CN104239606B (en) | The UML modeling methods and device of touch screen are supported under Web environment | |
| CN107168633B (en) | A kind of gesture interaction query event construction method based on data dependence | |
| CN105988703A (en) | Business object display method and apparatus | |
| CN110826185A (en) | Method for establishing bearing part library based on CAD secondary development |
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 |