一个轻简的jQuery拖放排序插件DDSort

所属分类:输入,UI-拖和放,筛选及排序

 11836  77  查看评论 (17)
一个轻简的jQuery拖放排序插件DDSort ie兼容6

使用方法:

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' )要是这个滚动条的元素。

详细API

DDSort方法接受一个JSON对象类型的参数,以下是对这个参数的描述。

参数列表类型描述
target string可选,插件内部使用的是jQuery的on方法绑定的事件,此参数就是on方法上的选择器字符串,默认'li'
cloneStyleobject可选,设置占位符元素的样式
floatStyleobject可选,设置拖动元素的样式
downfunction鼠标按下时执行的函数
movefunction可选,鼠标移动时执行的函数
upfunction可选,鼠标抬起时执行的函数

相关插件-拖和放,筛选及排序

jQuery多容器之间拖曳

除了有一般拖曳的功能,还可以在不同容器之间拖曳。
  拖和放
 5056  41

jQuery可任意拖拽排序菜单树机构树

jQuery可任意拖拽排序菜单树机构树
  拖和放
 9022  64

jQuery拖动滑块选择数字插件sider.jquery.js

通过拖动滑块快速输入数值,并可以设置常用的数值快速选择
  拖和放
 1612  6

jQuery刻度尺特效(移动端)

jQuery手指滑动刻度尺选择值特效是一款手机移动端滑动刻度尺代码。
  拖和放
 2325  19

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币

    狼灰灰 0
    2017/8/7 9:19:32

    我遇到的问题是火狐浏览器更本就没有用。点击失效。拖动失效,有没有遇到过的。

    回复
       0
    2017/6/18 13:18:11

    用鼠标移动时,内容没了怎么解决

    回复
    junyi5d 0
    2017/3/24 17:28:09

    这个拖动应该在范围之内吧。。

    回复
    Q.Ni 0
    2017/3/10 18:02:00

    横向拖动会狂闪,谁遇到过!

        SEven's 喵了个咪的3
        2017/10/15 22:09:56

        他没做横向移动

        给你个解决方法 

        第一步 在 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);
            }
        }
        SEven's 喵了个咪的0
        2017/10/15 22:10:49

        然后如果你要横向排列的话 在对象后面添加一个vertical: false就可以了

    回复
    Cc。 0
    2016/12/15 15:12:55
    在一个弹窗下使用它,移动的时候就出现的位置就偏离了.    应该不是要给$doc绑定move,不知道怎么要改了.....
        ___、For╀0
        2017/1/11 14:01:41

        这个怎么改啊。我也是这问题

    回复
    ,想念你的笑靥。。 0
    2016/9/19 16:09:11
    很厉害啊..可是请问一下,我结合了bootstrap,为什么点击某个tr,就会消失不见了?还有up怎么构造函数呢 回复
    修罗珊珊 0
    2016/8/19 17:08:38
    当列表顶部不在视窗内的时候(内容再多一些的时候会触发浏览器左侧的滚动条,列表顶部超出视窗范围),然后....,在拖拽的时候,焦点高度的获取是错误的
        ___、For╀0
        2017/1/11 14:01:53

        这个我也遇到。怎么解决啊?如果页面有滚动条,而这部分不在页面内,翻到下面。在点击拖动,那个li就不在鼠标上。在靠下面的地方

        ___、For╀3
        2017/1/11 17:01:36

        我解决了,因为这个高度没减去滚动条的高度,

        scrollTop = document.documentElement.scrollTop || document.body.scrollTop,

        获得后,在用最后那个高度值把这个减去

        $this.css({
        	left: left,//我没做宽度,没必要   
        	top: top - scrollTop//这个值才是正确的,弹窗都没问题
        });
    回复
    忆诺 0
    2016/8/12 11:08:35
    target 的对象只能是li吗?能不能应用在 table 上,使 targt 的对象是 tr? 回复
    山丘的彼方 0
    2016/8/4 11:08:55
    junyi5d 0
    2016/8/4 9:08:39
    可以右边有个汉堡菜单,拖动那里才起效;倾斜其实没必要,拖动最好是在框架范围之内,而不是可以拖出去 回复
取消回复