1、假设Html结构如下:
<div id="wrap"> <ul> <li>...</li> <li>...</li> ... </ul> </div>
2、依次引入jquery.js和ddsort.js,然后使用DDSort API实现如图拖放排序效果:
$( '#wrap' ).DDSort({ target: 'li', //示例而用,默认即'li' floatStyle: { //示例二用,默认有一定的样式 'border': '1px solid #ccc', 'background-color': '#fff' } });
3、如果拖放列表带有滚动条,那么$( '#wrap' )要是这个滚动条的元素。
DDSort方法接受一个JSON对象类型的参数,以下是对这个参数的描述。
参数列表 | 类型 | 描述 |
target | string | 可选,插件内部使用的是jQuery的on方法绑定的事件,此参数就是on方法上的选择器字符串,默认'li' |
cloneStyle | object | 可选,设置占位符元素的样式 |
floatStyle | object | 可选,设置拖动元素的样式 |
down | function | 鼠标按下时执行的函数 |
move | function | 可选,鼠标移动时执行的函数 |
up | function | 可选,鼠标抬起时执行的函数 |
<div id="wrap" style="margin-top: 900px;"> <div class="itemdd_div"> <img src="aaa.jpg"> </div> <div class="itemdd_div"> <img src="bbb.png"> </div> <div class="itemdd_div"> <img src="ccc.jpg"> </div> </div>
然后拖动会出现定位问题
我遇到的问题是火狐浏览器更本就没有用。点击失效。拖动失效,有没有遇到过的。
横向拖动会狂闪,谁遇到过!
他没做横向移动
给你个解决方法
第一步 在 settings 对象中添加一个开关 vertical: true,
第二步 在下面排序的地方修改一下
if (settings.vertical) { //向上排序 if (prev.length && top < prev.offset().top + prev.outerHeight() / 2) { clone.after(prev); //向下排序 } else if (next.length && top + thisOuterHeight > next.offset().top + next.outerHeight() / 2) { clone.before(next); } } else { if (prev.length && left < prev.offset().left + prev.outerHeight() / 2) { clone.after(prev); } else if (next.length && left + thisOuterHeight > next.offset().left + next.outerHeight() / 2) { clone.before(next); } }