拖曳排序插件——sortable
拖曳排序插件的功能是將序列元素（例如<option>、<li>）按任意位置進(jìn)行拖曳從而形成一個(gè)新的元素序列，實(shí)現(xiàn)拖曳排序的功能，它的調(diào)用格式為：
$(selector).sortable({options});
selector參數(shù)為進(jìn)行拖曳排序的元素，options為調(diào)用方法時(shí)的配置對(duì)象，
例如，在頁面中，通過加載sortable插件將<ul>元素中的各個(gè)<li>表項(xiàng)實(shí)現(xiàn)拖曳排序的功能，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于使用sortable插件綁定了<ul>元素，并設(shè)置了拖曳時(shí)的透明度，因此，<ul>中的各個(gè)<li>元素則能指定的透明度進(jìn)行任意的拖曳排序。
任務(wù)
我來試試，親自調(diào)用sortable插件對(duì)<ul>元素中的<li>表項(xiàng)進(jìn)行拖曳排序。
在下列代碼的第29、30行，調(diào)用插件的sortable()方法，實(shí)現(xiàn)按指定的透明度進(jìn)行拖曳排序的功能。
- ?不會(huì)了怎么辦
-
- 首先，在
sortable()方法的配置對(duì)象中添加“delay”屬性，該屬性表示拖曳后，延時(shí)放置的時(shí)間，通常設(shè)置為2秒，此屬性可以防止點(diǎn)擊時(shí)事件沖突。
- 其次，在
sortable()方法的配置對(duì)象中添加“opacity”屬性，該屬性表示拖曳元素時(shí)，元素本身的透明度值，此屬性值時(shí)一個(gè)百分比小數(shù)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>拖曳排序插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://idcbgp.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://idcbgp.cn/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜歡的運(yùn)動(dòng)</span>
</div>
<div class="content">
<ul>
<li>1)足球</li>
<li>2)散步</li>
<li>3)籃球</li>
<li>4)乒乓球</li>
<li>5)騎自行車</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("ul").sortable({
?
?
})
});
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color:Blue;
color:#fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
ul
{
float: left;
width: 280px;
padding: 5px 0px;
margin: 0px;
font-size: 14px;
list-style-type: none;
}
ul li
{
float: left;
width: 264px;
height: 32px;
line-height: 32px;
padding: 3px 8px;
border:solid 1px #ccc;
background-color:#eee;
cursor:move;
margin:2px 0px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
