codecamp

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

查看演示  website
下载地址:https://github.com/Barrior/DDSort
ie兼容6
插件描述:jQuery任意拖动页面中元素代码

使用方法:

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和CSS3网页固定背景视觉差特效插件
jQuery可拖拽型控件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }