jQuery仿360浏览器导航页图标拖动

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-27 17:19:39

jQuery仿360浏览器导航页图标拖动效果实现

理解需求

我们要实现的效果是：

拖动： 用户可以随意拖动导航页的图标。
排序： 图标的顺序可以根据拖动结果进行调整。
动画效果： 拖动过程中可以加入一些动画效果，提升用户体验。
兼容性： 兼容主流浏览器。

实现步骤

1. HTML结构

HTML

<div class="nav-container">
  <div class="nav-item" draggable="true">图标1</div>
  <div class="nav-item" draggable="true">图标2</div>
  <div class="nav-item" draggable="true">图标3</div>
</div>

2. CSS样式

CSS

.nav-container {
  width: 80%;
  margin: 0 auto;
}

.nav-item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin: 10px;
  cursor: move;
}

3. jQuery代码

JavaScript

$(document).ready(function() {
  $(".nav-item").draggable({
    containment: ".nav-container",
    revert: "invalid",
    scroll: false,
    stack: ".nav-item",
    stop: function(event, ui) {
      // 拖动结束后的回调函数，可以在这里添加自定义的排序逻辑
      console.log("拖动结束：", ui.position);
    }
  });
});

代码解释

HTML结构： 创建一个容器，包含多个可拖动的div元素。
CSS样式： 设置每个div元素的样式，使其具有可拖动的外观。
jQuery代码：
- 使用jQuery UI的draggable方法来实现拖拽功能。
- containment: 限制拖拽范围在容器内。
- revert: 拖拽结束后回到原位。
- scroll: 禁止滚动。
- stack: 使拖动的元素堆叠在一起。
- stop: 拖动结束时的回调函数，可以在这里实现自定义的排序逻辑。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery仿360导航页图标拖动</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <scrip   t src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></   script>
  <style>
    /* CSS样式 */
  </style>
</head>
<body>
  <div class="nav-container">
    </div>
  <script>
    // jQuery代码
  </script>
</body>
</html>