前言
随着移动互联网的发展，越来越多的应用需要实现可拖拽排序的功能，以便用户可以自由地调整应用中各个元素的位置。在前端开发中，实现可拖拽排序 GridView 是一项常见的任务，因此本文将介绍如何使用 Material Design 实现可拖拽排序 GridView 的方法及示例。
Material Design 简介
Material Design 是 Google 推出的一种设计语言，旨在为移动应用和 Web 应用提供一致的用户界面和交互体验。Material Design 的设计原则包括实现自然的动画效果、提供清晰的视觉层次结构、使用明确的图标和颜色等。Material Design 还提供了一些组件和样式，可以帮助开发者快速实现具有 Material Design 风格的应用。
实现可拖拽排序 GridView 的方法
要实现可拖拽排序 GridView，需要使用一些 JavaScript 库和框架。本文将使用以下库和框架：
- jQuery：用于处理 DOM 操作和事件处理。
- jQuery UI：用于实现拖拽和排序功能。
- Material Design Lite：用于提供 Material Design 风格的组件和样式。
下面是具体的步骤：
1. 引入必要的库和框架
在 HTML 文件中引入必要的库和框架：
// javascriptcn.com 代码示例 <!DOCTYPE html> <html> <head> <title>可拖拽排序 GridView 示例</title> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> </head> <body> <!-- GridView 的 HTML 代码 --> </body> </html>
2. 编写 GridView 的 HTML 代码
在 body 中编写 GridView 的 HTML 代码：
<div class="mdl-grid"> <div class="mdl-cell mdl-cell--4-col" id="item1">Item 1</div> <div class="mdl-cell mdl-cell--4-col" id="item2">Item 2</div> <div class="mdl-cell mdl-cell--4-col" id="item3">Item 3</div> <div class="mdl-cell mdl-cell--4-col" id="item4">Item 4</div> <div class="mdl-cell mdl-cell--4-col" id="item5">Item 5</div> <div class="mdl-cell mdl-cell--4-col" id="item6">Item 6</div> </div>
这里使用了 Material Design Lite 提供的 Grid System，将 GridView 分成了 6 个等宽的列，每个列中放置了一个元素。每个元素都有一个唯一的 id，用于后面的事件处理。
3. 初始化 GridView
在 JavaScript 文件中编写初始化 GridView 的代码：
// javascriptcn.com 代码示例
$(function() {
$("#item1, #item2, #item3, #item4, #item5, #item6").draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
zIndex: 100
});
$(".mdl-grid").sortable({
items: ".mdl-cell",
tolerance: "pointer",
placeholder: "mdl-cell mdl-cell--4-col",
forcePlaceholderSize: true,
start: function(event, ui) {
ui.item.addClass("is-dragging");
},
stop: function(event, ui) {
ui.item.removeClass("is-dragging");
}
});
});这里使用了 jQuery UI 提供的 draggable 和 sortable 方法来实现拖拽和排序功能。draggable 方法将每个元素设置为可拖拽，sortable 方法将整个 GridView 设置为可排序。在 sortable 方法中，设置了以下选项：
- items：指定可排序的元素。
- tolerance：指定拖拽元素与排序元素的接触方式。
- placeholder：指定拖拽元素占位符的样式。
- forcePlaceholderSize：指定占位符是否与拖拽元素的大小相同。
- start：指定拖拽开始时的回调函数。
- stop：指定拖拽结束时的回调函数。
在 start 和 stop 回调函数中，分别添加和删除了一个 is-dragging 类，用于设置拖拽元素的样式。
4. 添加样式
在 CSS 文件中添加样式：
.is-dragging {
opacity: 0.5;
}
.mdl-cell.is-dragging {
border: 2px dashed rgba(0, 0, 0, 0.2);
}这里添加了两个样式，分别用于设置拖拽元素的透明度和边框样式。
示例代码
下面是完整的示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>可拖拽排序 GridView 示例</title>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<style>
.is-dragging {
opacity: 0.5;
}
.mdl-cell.is-dragging {
border: 2px dashed rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col" id="item1">Item 1</div>
<div class="mdl-cell mdl-cell--4-col" id="item2">Item 2</div>
<div class="mdl-cell mdl-cell--4-col" id="item3">Item 3</div>
<div class="mdl-cell mdl-cell--4-col" id="item4">Item 4</div>
<div class="mdl-cell mdl-cell--4-col" id="item5">Item 5</div>
<div class="mdl-cell mdl-cell--4-col" id="item6">Item 6</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script>
$(function() {
$("#item1, #item2, #item3, #item4, #item5, #item6").draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
zIndex: 100
});
$(".mdl-grid").sortable({
items: ".mdl-cell",
tolerance: "pointer",
placeholder: "mdl-cell mdl-cell--4-col",
forcePlaceholderSize: true,
start: function(event, ui) {
ui.item.addClass("is-dragging");
},
stop: function(event, ui) {
ui.item.removeClass("is-dragging");
}
});
});
</script>
</body>
</html>总结
通过本文介绍的方法，可以轻松实现可拖拽排序 GridView 的功能，并且使用 Material Design Lite 提供的组件和样式，可以让应用具有统一的 Material Design 风格。同时，本文还介绍了如何使用 jQuery UI 实现拖拽和排序功能，这对于初学者来说也是一种不错的学习机会。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65681e2fd2f5e1655d0e1d77