下面我将详细讲解“jQuery UI Draggable + Sortable 结合使用(实例讲解)”的完整攻略。
一、前言
在网页设计中,元素的拖拽和排序功能十分常见,为此,jQuery UI提供了Draggable(可拖动)和Sortable(可排序)插件用于实现这些功能,同时也有人将Draggable和Sortable结合使用,以实现更丰富的功能。
本文将详细讲解如何使用jQuery UI的Draggable和Sortable插件结合使用,为大家提供完整的攻略。
二、jQuery UI Draggable + Sortable 结合使用攻略
下面是jQuery UI Draggable + Sortable 结合使用的攻略:
1. 引入jQuery UI
使用jQuery UI Draggable和Sortable插件,首先需要引入jQuery和jQuery UI的js和css文件,具体可以在head标签中添加以下代码:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
2. HTML结构
首先,我们需要有一些HTML结构来演示如何使用Draggable和Sortable插件结合使用,实例如下:
<div id="sortable">
<div class="ui-state-default" id="draggable1">Draggable Item 1</div>
<div class="ui-state-default" id="draggable2">Draggable Item 2</div>
<div class="ui-state-default" id="draggable3">Draggable Item 3</div>
<!-- ... 可以添加更多的元素 ... -->
</div>
以上代码是一个简单的sortable列表,里面包含3个可拖拽的元素。
3. 初始化插件
接下来,我们需要使用jQuery UI来初始化Draggable和Sortable插件,具体代码如下:
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable1, #draggable2, #draggable3" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
以上代码中,我们首先使用了sortable函数初始化了一个可排序列表,同时通过connectToSortable选项把Draggable和Sortable插件连接在了一起。接着,我们使用了draggable函数将列表中的元素变为可拖拽的,通过helper选项可以设置拖拽时副本的样式,通过revert选项可以控制是否允许元素拖拽到非Sortable区域时自动返回。最后,我们通过disableSelection函数禁用了所有元素的文字选择功能。
4. 完整示例1
下面是一个完整的可排序和可拖拽列表的示例代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable 结合使用示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 3px 3px 0 0; padding: 0; float: left; width: 100%; height: 22px; font-size: 14px; text-align: center; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable1, #draggable2, #draggable3" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default" id="draggable1">Draggable Item 1</li>
<li class="ui-state-default" id="draggable2">Draggable Item 2</li>
<li class="ui-state-default" id="draggable3">Draggable Item 3</li>
</ul>
</body>
</html>
5. 完整示例2
下面是另一个完整的示例,在该示例中我们使用了更多的选项和回调函数。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable 结合使用示例2</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 3px 3px 0 0; padding: 0; float: left; width: 100%; height: 22px; font-size: 14px; text-align: center; }
.ui-draggable, .ui-sortable-helper { background-color: #fff; border: 1px solid #ccc; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
helper: "clone",
cursor: "move",
start: function(event, ui) {
ui.item.addClass('dragging');
},
stop: function(event, ui) {
ui.item.removeClass('dragging');
}
});
$( "#draggable1, #draggable2, #draggable3" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default" id="draggable1">Draggable Item 1</li>
<li class="ui-state-default" id="draggable2">Draggable Item 2</li>
<li class="ui-state-default" id="draggable3">Draggable Item 3</li>
</ul>
</body>
</html>
在以上示例代码中,我们首先给sortable函数添加了placeholder选项,用于设置拖拽时要插入的元素的样式,接着添加了helper选项以设置拖拽时副本的样式。最后,我们还添加了cursor选项以设置拖拽时鼠标的样式,并在start和stop回调函数中添加了类名以在拖拽开始和结束时改变元素的样式。
结语
本文详细讲解了如何使用jQuery UI的Draggable和Sortable插件结合使用,同时提供了两个完整的示例代码。希望本文能对大家理解jQuery UI的Draggable和Sortable插件有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery UI Draggable + Sortable 结合使用(实例讲解) - Python技术站