1. 最終效果
1.png
2. 插件的下載以及代碼
下載
引入js文件即可使用
注意看一下jquery鏈接有沒有失效
jquery.dragsort可以去官網(wǎng)下載
下載之后是一個壓縮包，解壓后去sourceCode\dragsort文件夾里找js文件
代碼
復(fù)制即可使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖動排序</title>
<style>
*{margin: 0;padding: 0;}
#list1 {
width: 350px;
border: 1px solid #000;
padding: 10px;
overflow: hidden;
margin:auto;
}
#list1 li {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
list-style: none;
margin: 5px;
background: #ccc;
}
#list1 li div {
text-align: center;
height: 75%;
}
#list1 li div:before{
display: inline-block;
content: "";
height: 100%;
vertical-align: middle;
}
#list1 .placeHolderDom {
background: #fff;
border:1px dashed #000;
}
#list1 .te {
width: 100%;
display: block;
height: 25%;
border-bottom: 1px solid #000;
text-align:center;
}
</style>
</head>
<body>
<ul id="list1">
<li><i class="te">拖動</i><div>0</div></li>
<li><i class="te">拖動</i><div>1</div></li>
<li><i class="te">拖動</i><div>2</div></li>
<li><i class="te">拖動</i><div>3</div></li>
<li><i class="te">拖動</i><div>4</div></li>
<li><i class="te">拖動</i><div>5</div></li>
<li><i class="te">拖動</i><div>6</div></li>
<li><i class="te">拖動</i><div>7</div></li>
<li><i class="te">拖動</i><div>8</div></li>
</ul>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./jquery.dragsort-0.5.1.min.js"></script>
<script>
$("#list1").dragsort({ dragSelector: $('.te'), dragBetween: false,dragEnd: textFn, placeHolderTemplate: "<li class='placeHolderDom'><div></div></li>" });
function textFn () {
console.log(123456);
}
</script>
</html>
3. 介紹
官網(wǎng)也有詳細(xì)的介紹，可以去看看
$("#list1").dragsort({ dragSelector: $('.te'), dragBetween: false,dragEnd: textFn, placeHolderTemplate: "<li class='placeHolderDom'><div></div></li>" ,scrollSpeed:1});
// dragSelector 觸發(fā)拖動的元素
//dragBetween 如果要啟用在選定列表之間拖動或允許將列表項拖動到列表之外以進(jìn)行自動滾動的功能，請設(shè)置為“ true”。默認(rèn)為false
//dragEnd 拖動結(jié)束后將調(diào)用的回調(diào)函數(shù)
//placeHolderTemplate 拖動之后的用來占位的元素
// scrollSpeed 這個參數(shù)一般不用，設(shè)置為一個數(shù)字，表示在將項目拖到滾動容器之外時頁面將滾動的速度，數(shù)值越高，數(shù)值越低。設(shè)置為0以禁用滾動。預(yù)設(shè)值為5。
4. 可能產(chǎn)生的錯誤
121.png
jquery1.8后廢棄了size() 用length代替。引用的jquery版本在是廢除了.size()之后的版本。
可以引用老版本的 jquery。
