欢迎访问WDPHP素材源码!今天是2024年03月19日 星期二,中午好!吃了吗?
您好,游客 [ 马上登录 | 注册帐号 | 微信登录 | QQ登录]
当前位置:首页 > 特效 > 页面布局 > jQuery拖拽排序插件DDSort.js

jQuery拖拽排序插件DDSort.js
栏目分类:页面布局    发布日期:2019-09-10    浏览次数:3600次     收藏

DDSort 一个轻简的 jQuery 拖放排序插件,支持移动端。...
浏览次数:3600 文件大小:563.24KB 下载积分:6积分

使用方法:

1、假设 Html 结构如下:

<div class="wrap">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div> 

2、依次引入 jquery.jsddsort.js,然后使用 DDSort API 实现如图拖放排序效果:

$( '.wrap' ).DDSort({
    
    // 示例而用,默认即 li
    target: 'li',

    // 示例而用,默认有一定的样式    
    floatStyle: {    
        'border': '1px solid #ccc',
        'background-color': '#fff'
    }
}); 

3、如果拖放列表带有滚动条,那么 $( '.wrap' ) 要是这个滚动条的元素。

详细API

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

参数列表 类型 描述
target string 可选,插件内部使用的是 jQuery 的 on 方法绑定的事件,此参数就是 on 方法上的选择器字符串,默认 li
delay number 可选,延迟拖拽,默认延时 100 毫秒
cloneStyle object 可选,设置占位符元素的样式
floatStyle object 可选,设置拖动元素的样式
down function 可选,鼠标按下时执行的函数
move function 可选,鼠标移动时执行的函数
up function 可选,鼠标抬起时执行的函数

申明:本站代码不提供任何技术服务,仅提供有偿服务。WDPHP素材源码所有资源都经过检测,请放心下载!

源码 模板 特效 素材 资源 教程 站长