标签：
在一次工作中需要将功能模块实现拖曳并且排序，并且将排序结果保存到数据库，用户下次登录后直接读取数据库排序信息进行显示。LZ找了好多插件，最后发现 jquery.dragsort 这款插件是最好使用的，使用简单，配置方便。
下面我将演示如何使用该插件：
一、导入js。该插件是基于jQuery开发的，所以我们除了要导入jquery.dragsort.js外还需要导入jQuery。
二、HTML部分
<div class="model_main">
<ul class="dragsort" id="modelDragsort">
<li>
<div class="modelMain">
<div class="main">
<div class="modelTitle"><a href="javascript:void(0)"></a></div>
<div class="modelContent">
<span class="contentImage"><img src="../resources/images/wyzs_01.png"/></span>
<span class="title">XXXXXX</span>
<a>XXXXXX</a>
</div>
</div>
</div>
</li>
<li>
<div class="modelMain">
<div class="main">
<div class="modelTitle"><a href="javascript:void(0)"></a></div>
<div class="modelContent">
<span class="contentImage"><img src="../resources/images/wyzn_01.png"/></span>
<span class="title">XXXXXX</span>
<a>XXXXXX</a>
</div>
</div>
</div>
</li>
<li>
<div class="modelMain">
<div class="main">
<div class="modelTitle"><a href="javascript:void(0)"></a></div>
<div class="modelContent">
<span class="contentImage"><img src="../resources/images/cjwt_01.png"/></span>
<span class="title">XXXXXX</span>
<a>XXXXXX</a>
</div>
</div>
</div>
</li>
<li>
<div class="modelMain">
<div class="main">
<div class="modelTitle"><a href="javascript:void(0)"></a></div>
<div class="modelContent">
<span class="contentImage"><img src="../resources/images/bdxz_01.png"/></span>
<span class="title">XXXXXX</span>
<a>XXXXXX</a>
</div>
</div>
</div>
</li>
</ul>
</div>
三、JS实现
$("#modelDragsort").dragsort({
dragSelector: "div.modelTitle", //容器拖动手柄
dragBetween: true, //
dragEnd:saveOrder, //执行之后的回调函数
dragSelectorExclude : "div.modelContent", //指定不会执行动作的元素
placeHolderTemplate: "<li class=‘placeHolder‘><div></div></li>", //拖动列表的HTML部分
scrollSpeed: 15 //拖动速度
});
OVER！！！就是这么简单！！！！结果：
下面博主还是提供上门的CSS样式代码：
.model_main{
width: 1001px;
height: 270px;
margin: 5px auto;
}
.model_main ul{
margin: 0px;
padding: 0px;
}
.model_main ul li{
margin-left: 11px;
float: left;
}
.model_main ul li:first-child{
margin-left:0px;
}
.modelMain{
width: 240px;
height: 260px;
margin-top: 0px;
border: 1px solid #C5C5C5;
float: left;
}
.modelMain .main{
width: 232px;
height: 252px;
border: 3px solid #FFFFFF;
}
.modelTitle{
width: 240px;
margin: 0px 0px;
padding-right: 10px;
height: 30px;
cursor: move;
}
.modelTitle a{
display: block;
width: 19px;
height: 19px;
background-image: url("../images/closeA_01.png");
float: right;
margin-top: 10px;
margin-right: 20px;
cursor: pointer;
}
.modelTitle a:hover{
background-image: url("../images/closeA_02.png");
}
.modelContent{
width: 210px;
margin: 10px auto;
height:200px;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
cursor: pointer;
}
.modelContentHover{
width: 210px;
margin: 10px auto;
height:200px;
border: 1px solid #960010;
background-color: #C11A16;
cursor: pointer;
}
.modelContent .title{
font-size: 20px;
font-weight: bold;
display: block;
width: 156px;
height:30px;
text-align: center;
margin: 0px auto;
line-height: 30px;
}
.modelContent a{
font-size: 14px;
display: block;
width: 156px;
height:20px;
text-align: center;
margin: 0px auto;
line-height: 20px;
cursor: pointer;
}
.contentImage{
display: block;
width: 116px;
height: 116px;
margin: 13px auto;
}
dragSelector ：CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。
dragSelectorExclude ：CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是”input, textarea, a[href]“。
dragEnd ：拖动结束后将被调用的回调函数。（想执行入库操作，就在这里做吧）
dragBetween ：设置为“true”，如果你要启用多组列表之间拖动选定的列表。 默认值是false。
placeHolderTemplate ：拖动列表的HTML部分。默认值是”<li></li>”.
scrollContainer ：CSS选择器的元素，作为滚动容器，例如溢出的div设置为自动。 默认值是“窗口“.
scrollSpeed ：一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。 如果设置为”0″以禁用滚动。默认值是”5″.
标签：
原文地址：http://www.cnblogs.com/mfc-itblog/p/5613133.html
