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

最新推荐文章于 2024-08-13 08:02:04 发布

cune1359

最新推荐文章于 2024-08-13 08:02:04 发布

阅读量362

点赞数

文章标签：定位 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可排序，这意味着我们能够将对象从一个位置移动到另一个位置。以下是最终结果的样子。

让我们开始吧。

步骤1：准备基本文件

在开始编写代码之前，我们需要准备一些基本的东西，包括： 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" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<link rel="stylesheet" href="style.css" />
<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>

步骤2：HTML结构

jQuery UI SortableHTML结构非常灵活。我们可以使用<div>或<dt> ，只要将它们包装在具有特定id属性的父元素中即可。

在本例中，我们将使用<li>标记。将下面显示的所有HTML放在<body> 。

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
    <li class="ui-state-default">Item 7</li>
</ul>

步骤3：激活UI Sortable

如上面的代码片段所示，附加在父元素上的id属性很重要。此ID用于激活jQuery UI的DOM元素。为此，请将以下所有脚本放在<head>标记内，紧接在我们之前添加的所有其他脚本之后。

<script>
    $(function() {
        $( "#sortable" ).sortable({ 
            placeholder: "ui-sortable-placeholder" 
        });
    });
</script>

此时，UI Sortable应该已经可以使用了。您可以单击，按住并拖动它们到顶部，反之亦然。但是，演示文稿仍然看起来白色和普通。

步骤4：定义新字体系列

如前所述，我们将需要FontAwesome来交付图标。在此处下载软件包，解压缩并将所有字体放在名为font的文件夹下。并将这些行放入style.css以在我们的Web文档FontAwesome中定义新的字体系列。

@font-face {
  font-family: "FontAwesome";
  src: url('font/fontawesome-webfont.eot');
  src: url('font/fontawesome-webfont.eot?#iefix') format('eot'), 
  	   url('font/fontawesome-webfont.woff') format('woff'), 
  	   url('font/fontawesome-webfont.ttf') format('truetype'), 
  	   url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

步骤5：设置UI可排序样式

在这一步中，我们将通过为body标签添加背景颜色来开始设计UI Sortable的样式，如下所示：

body {
	background-color: #333;
}

然后，我们指定UI Sortable的固定宽度，将其定位在浏览器窗口的中心，并添加一些头，如下所示：

.ui-sortable {
	width: 350px;
	margin: 50px auto;
	background-color: #ccc;
	-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .1);
  box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .1);
  list-style-type: none; 
  padding: 0; 
}

此时，我们的UI Sortable如下图所示。

UI默认状态

接下来，我们将为<li>元素添加默认样式。这些样式由背景渐变颜色，元素的长度，边框，文本样式组成，并且特别删除了<li>的第一个子元素和最后一个子元素的边界。

.ui-sortable li.ui-state-default { 
	margin: 0; 
	height: 45px;
	line-height: 48px;
	font-size: 1.4em; 
	color: #fff;
	outline: 0;
	padding: 0;
	margin: 0;
	text-indent: 15px;
	background: rgb(78,82,91);
	background: -moz-linear-gradient(top,  rgb(78,82,91) 0%, rgb(57,61,68) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(78,82,91)), color-stop(100%,rgb(57,61,68)));
	background: -webkit-linear-gradient(top,  rgb(78,82,91) 0%,rgb(57,61,68) 100%);
	background: -o-linear-gradient(top,  rgb(78,82,91) 0%,rgb(57,61,68) 100%);
	background: -ms-linear-gradient(top,  rgb(78,82,91) 0%,rgb(57,61,68) 100%);
	background: linear-gradient(to bottom,  rgb(78,82,91) 0%,rgb(57,61,68) 100%);
	border-top: 1px solid rgba(255,255,255,.2);
	border-bottom: 1px solid rgba(0,0,0,.5);
	text-shadow: -1px -1px 0px rgba(0,0,0,.5);
	font-size: 1.1em;
	position: relative;
	cursor: pointer;
}
.ui-sortable li.ui-state-default:first-child {
	border-top: 0; 
}
.ui-sortable li.ui-state-default:last-child {
	border-bottom: 0;
}

添加这些颜色后，我们的UI会开始看起来更好，如以下屏幕截图所示。

占位符

不，这不是HTML5的Placeholder 属性。 jQuery UI中的占位符是指可以放置DOM元素的空白。在这种情况下，我们将添加带有灰色背景和虚线边框的区域，就像这样。

.ui-sortable-placeholder {
	border: 3px dashed #aaa;
	height: 45px;
	width: 344px;
	background: #ccc;
}

现在，当您尝试替换DOM位置时，您应该看到如下图所示的区域。

“可移动”图标

最后，我们将在<li>上添加一个图标，以表明它是可移动的。为此，我们将通过:after 伪元素添加此图标，并专门分配FontAwesome字体系列。

.ui-sortable li.ui-state-default:after {
	content: "\f0c9";
	display: inline-block;
	font-family: "FontAwesome";
	position: absolute;
	right: 18px;
	top: 9px;
	text-align: center;
	line-height: 35px;
	color: rgba(255,255,255,.2);
	text-shadow: 0px 0px 0px rgba(0,0,0,0);
	cursor: move;
}

这就是我们需要的所有代码。最后，您可以通过以下链接查看演示并检查源代码。我们希望您喜欢本教程。