字体-字体+

jquery实现拖动html元素进行排序

2017-08-20 Javascript/Jquery 访问量 138


今天博主要分享的这个jquery的手动排序插件也是取自于网上大神的分享,相信你用了这个插件后,也能自己在自己的应用中来实现,是不是感觉很拉风呢。

整段jquery代码不到150行,相信是很精简的了。

在合适的文件部位引用之后,接下来加上下面的代码就行了,前面得加上jquery的核心包。

$('#table').DDSort({
    target: 'tr',
    floatStyle: {
        'border': '1px solid #ccc',
        'background-color': '#fff',
        'cursor': 'move'
    },
    up: function () {
        $.post("<?php echo site_url(ADMIN_MODULE . '/index/changeSort') ?>", {
            id: $(this).attr('id'),
            sort: $(this).index() - 1
        }, function (data) {
            if (data) {
                return true;
            } else {
                return false;
            }
        })
    }
});

#table是包裹的外层元素,比如我想要拖动一行tr/li,那么这里就是table/ul。

target就是要拖动的元素了,一般是具有相同属性的元素。

floatStyle,这里还可以自己定义一些样式,和css写法一样。

最后的up是拖动完成后触发的事件,比如可以做一些排序等等的功能。

最后来看看效果图吧。

拖动排序

jquery拖动排序插件下载地址如下:

链接: http://pan.baidu.com/s/1pLUIJTx 密码: uhr7

标签:

原文来自:http://www.dawnfly.cn/article-1-361.html,转载请注明出处,谢谢【破晓博客复制链接地址