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:
Icon size may vary;
Requires the results to be retained (the layout remains unchanged after reloading the page);
There is no need to consider compatibility, just briefly talk about the general idea.
The effect is just like the Windows 10 start menu:
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:
Icon size may vary;
Requires the results to be retained (the layout remains unchanged after reloading the page);
There is no need to consider compatibility, just briefly talk about the general idea.
The effect is just like the Windows 10 start menu:
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...