网页设计：使用jQuery UI Sortable进行拖放

最新推荐文章于 2024-05-14 09:47:51 发布

cune1359

最新推荐文章于 2024-05-14 09:47:51 发布

阅读量351

点赞数

文章标签：定位 css html javascript js ViewUI

这篇博客介绍如何使用jQuery UI Sortable插件创建可排序的DOM元素，包括准备基本文件、设置HTML结构、激活UI Sortable、定义字体系列和自定义样式。通过这些步骤，你可以实现元素的拖放功能并自定义其视觉效果。

摘要由CSDN通过智能技术生成

从UI手风琴， UI Slider和UI Date Picker开始，我们介绍了如何为jQuery UI赋予自定义样式。今天，我们将以jQuery UI Sortable为主题继续探索jQuery UI 。

这个特定的插件将使一组DOM可排序，这意味着我们能够将对象从一个位置移动到另一个位置。以下是最终结果的样子。

让我们开始吧。

在开始编写代码之前，我们需要准备一些基本的东西，包括： jQuery ， jQuery UI库和FontAwesome，以提供稍后将要使用的图标。

对于jQuery和jQuery UI库，您不必自己托管它们，更好，更实用的方法是从CDN链接它们，如下所示：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

将这些脚本放在<head>内或结束body标记之前，以提高加载性能。

此外，我们不会使用jQuery UI附带的默认样式，因此我们需要创建一个新CSS文件来存储我们的自定义样式，然后将其链接到我们的文档，如下所示。

<link rel="stylesheet" href="style.css" />

下一步是可选的，您可以根据需要离开。但是，我更喜欢使用noremalize.css标准化所有默认的DOM样式，否则您也可以使用Eric Mayer的CSS Reset 。

将此行放在我们之前创建的style.css的头部内。

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">

总而言之，这是我们在<head>标记内链接的所有文件。

<link rel="stylesheet&

关注