Rumah > pembangunan bahagian belakang > tutorial php > Javascript如何实现自动排序?

Javascript如何实现自动排序?

WBOY
Lepaskan: 2023-03-02 11:00:02
asal
1350 orang telah melayarinya

一个Metro风格的UI网页,如何实现鼠标拖拽某个图标以后其他图标根据被拖拽图标的位置自动排序?
注意:

  1. 图标大小可能不同;

  2. 要求结果得到保留(重载页面以后布局不变);

  3. 不需要考虑兼容性,只需简单讲讲大概思路。

效果就像 Windows10 的开始菜单:
Javascript如何实现自动排序?

回复内容:

一个Metro风格的UI网页,如何实现鼠标拖拽某个图标以后其他图标根据被拖拽图标的位置自动排序?
注意:

  1. 图标大小可能不同;

  2. 要求结果得到保留(重载页面以后布局不变);

  3. 不需要考虑兼容性,只需简单讲讲大概思路。

效果就像 Windows10 的开始菜单:
Javascript如何实现自动排序?

这个根据坐标来吧,一个图标被拖到一个位置,这个图标的坐标就是新位置的坐标,后面受影响的图标的坐标减去这个拖动图标的宽度或者宽度

应该有对应的插件吧

个人觉得可以理解为两个位置进行交换,昨天用到一个插件你可以试试"sortable.js"十分小3kb左右,而且很好用

快速的话建议用插件,自己写那我感觉挺牛

官方有实现和文档
metroui: http://metroui.org.ua/
start-screen: http://metroui.org.ua/templat...

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan