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

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

一个轻简的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图片DIV指定范围内拖动加调整大小

实现在指定大小DIV内拖动图片,以及调整图片大小
  拖和放
 2500  17

jquery 拖动复制

jquery拖动div复制到表格
  拖和放
 6048  56

jQuery拖拽左右滑动效果

鼠标左右滑动的手机页面切换效果
  拖和放
 5487  41

jQuery拖放插件Gridly

Gridly是一个JQuery插件,它能够拖动,删除和调整一个网格的大小。
  拖和放
 29876  62

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

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

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

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

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

    回复
    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
    可以右边有个汉堡菜单,拖动那里才起效;倾斜其实没必要,拖动最好是在框架范围之内,而不是可以拖出去 回复
    『非诚〓勿扰』 0
    2016/8/4 8:08:30
    感觉还可以再做修改,这样好像复制文字的功能就不能用了
        碎秋の稻草0
        2016/8/4 13:08:07
        可以复制
    回复
取消回复