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

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

 43810  385  查看评论 (29)
分享到微信朋友圈
X
一个轻简的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可选,鼠标抬起时执行的函数

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

拖放交互的想法

在UI中拖放交互的一些想法,这个想法是显示一个可拖拽的区域,代表一个元素被拖拽后的某些动作。
  拖和放
 26345  345

jquery 拖动复制

jquery拖动div复制到表格
  拖和放
 45676  453

jquery div拖拽换位合并拆分(原创)

拖动div块,两个div距离足够近时合并,远一点时换位。右键点击已合并的div,可显示可选择拆分数组,点击要拆分的数据,即可拆分。再次右击已合并的div即可收起可选择的拆分数据组
  拖和放
 20529  228

图标拖拽效果,兼容所有浏览器

原生JS实现图标图片拖拽,封装好了,可以直接拿去使用
  拖和放
 38577  374

讨论这个项目(29)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    棉花糖的骨架 0
    2020/7/26 11:16:33
    排序之后原来的元素的style会丢失怎么办呀,比如我添加元素之后 修改了元素的高度,然后拖动排序之后 高度就没了 变回了默认高度
        棉花糖的骨架0
        2020/7/26 11:16:57
        求解答呀
    回复
    小子! 加油! /dy/ka 0
    2019/8/30 16:54:00
    动态的元素怎么绑定这个插件呢? 回复
    WenYuan 0
    2018/9/28 9:52:46
    若果要使第一个元素不可拖动,且下面的元素不能拖动到该元素上面,该如何设置
    回复
    嫣然之情 0
    2018/9/20 15:44:17
    报一个bug希望作者能帮忙想个办法解决。
    当浏览器使用缩放功能的时候,鼠标移动到拖拽的元素上时会出现乱跳的现象,非常影响使用,比如缩放到90%,肯定出现现象。
        西瓜0
        2018/9/20 15:55:38
        不知道你用的什么浏览器,chrome下按你说的测试了下没有问题
        嫣然之情0
        2018/11/22 14:12:19
        问题补充:这个问题就是在chrome浏览器下使用的,但是拖动元素有修改。所有的拖动元素都修改为定宽100px定高32px 修改为表格方式排列,每一个元素相当于在一个表格的cell中 如下:
        ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑
        ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙
        ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑
        ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙
        ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑ ┍┅┅┅┅┑
        ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙ ┕┅┅┅┅┙
        上图是由示例中修改而来的拖动区域。 可以拖动每个区域调整位置,在缩放比正常100%时没有问题。当缩放比在90%时 所有拖动区域块都在乱跳
    回复
    借过 0
    2018/8/22 14:15:23
    <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>

    然后拖动会出现定位问题

    回复
    N5712 0
    2018/7/11 10:53:47
    我动态新增的一个li,只可以往上拖动排列的时候页面中原有的就不会动了 回复
    狼灰灰 0
    2017/8/7 9:19:32

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

        借过0
        2018/8/22 14:14:18
        当高度超过一个屏幕,body有滚动条时,这个插件就有问题了,作者解决下?
    回复
       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就可以了

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复