Home > Backend Development > PHP Tutorial > How to implement automatic sorting in Javascript?

How to implement automatic sorting in Javascript?

WBOY
Release: 2023-03-02 11:00:02
Original
1351 people have browsed it

In a Metro-style UI web page, how to realize that after dragging an icon with the mouse, other icons are automatically sorted according to the position of the dragged icon?
Note:

  1. Icon size may vary;

  2. Requires the results to be retained (the layout remains unchanged after reloading the page);

  3. There is no need to consider compatibility, just briefly talk about the general idea.

The effect is just like the Windows 10 start menu:
How to implement automatic sorting in Javascript?

Reply content:

In a Metro-style UI web page, how to realize that after dragging an icon with the mouse, other icons are automatically sorted according to the position of the dragged icon?
Note:

  1. Icon size may vary;

  2. Requires the results to be retained (the layout remains unchanged after reloading the page);

  3. There is no need to consider compatibility, just briefly talk about the general idea.

The effect is just like the Windows 10 start menu:
How to implement automatic sorting in Javascript?

This is based on coordinates. When an icon is dragged to a position, the coordinates of the icon are the coordinates of the new position. The coordinates of the subsequent affected icons are minus the width or width of the dragged icon

There should be a corresponding plug-in

Personally, I think it can be understood as two positions being exchanged. I used a plug-in yesterday. You can try "sortable.js". It is very small, about 3kb, and very easy to use.

If it’s fast, it’s recommended to use a plug-in. If you write it yourself, I feel pretty good

Official implementation and documentation
metroui: http://metroui.org.ua/
start-screen: http://metroui.org.ua/templat...

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template