DDSort-简单实用的jQuery拖拽排序插件
DDSort.js是一款简单实用的jQuery拖拽排序插件。通过该插件你可以任意拖动页面中元素,并放置到指定的地方。DDSort.js插件实用简单,兼容IE8浏览器。
在线预览 下载
使用方法
实用该拖拽排序插件需要在页面中引入jquery文件和ddsort.js文件。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsort.js"></script>
HTML结构
如果你使用一个无序列表作为你需要拖拽排序的元素,结构如下:
<div id="wrap">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
初始化插件
在页面DOM元素加载完毕之后,可以通过DDSort()方法来初始化插件。
$( '#wrap' ).DDSort({
target: 'li', //拖拽的目标元素,默认即'li'
floatStyle: { //拖拽元素的样式,默认有一定的样式
'border': '1px solid #ccc',
'background-color': '#fff'
}
});
如果拖放列表带有滚动条,那么$( ‘#wrap’ )需要是这个带滚动条的元素。
配置参数
参数 | 类型 | 描述 |
target | string | 可选,插件内部使用的是jQuery的on方法绑定的事件,此参数就是on方法上的选择器字符串,默认'li' |
cloneStyle | object | 可选,设置占位符元素的样式 |
floatStyle | object | 可选,设置拖动元素的样式 |
down | function | 可选,鼠标按下时执行的函数 |
move | function | 可选,鼠标移动时执行的函数 |
up | function | 可选,鼠标抬起时执行的函数 |