DDSort-简单实用的jQuery拖拽排序插件

当前位置:主页 > jQuery库 > 布局和界面 > DDSort-简单实用的jQuery拖拽排序插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
DDSort-简单实用的jQuery拖拽排序插件
分享:

    插件介绍

    DDSort.js是一款简单实用的jQuery拖拽排序插件。通过该插件你可以任意拖动页面中元素,并放置到指定的地方。DDSort.js插件实用简单,兼容IE8浏览器。

    浏览器兼容性

    浏览器兼容性
    时间:2016-06-27
    阅读:
简要教程

DDSort.js是一款简单实用的jQuery拖拽排序插件。通过该插件你可以任意拖动页面中元素,并放置到指定的地方。DDSort.js插件实用简单,兼容IE8浏览器。

使用方法

实用该拖拽排序插件需要在页面中引入jquery文件和ddsort.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsort.js"></script>
                
HTML结构

如果你使用一个无序列表作为你需要拖拽排序的元素,结构如下:

<div id="wrap">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>                 
                
初始化插件

在页面DOM元素加载完毕之后,可以通过DDSort()方法来初始化插件。

$( '#wrap' ).DDSort({
    target: 'li',             //拖拽的目标元素,默认即'li'
    floatStyle: {           //拖拽元素的样式,默认有一定的样式
        'border': '1px solid #ccc',
        'background-color': '#fff'
    }
});                  
                

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

配置参数

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

DDSort插件的github主页地址为:https://github.com/Barrior/DDSort

网友评论