chenssy
致力打造Java精品博客站点

jquery.dragsort实现列表拖曳、排序

在一次工作中需要将功能模块实现拖曳并且排序,并且将排序结果保存到数据库,用户下次登录后直接读取数据库排序信息进行显示。LZ找了好多插件,最后发现 jquery.dragsort 这款插件是最好使用的,使用简单,配置方便。

2014060500000

下面我将演示如何使用该插件:

一、导入js。该插件是基于jQuery开发的,所以我们除了要导入jquery.dragsort.js外还需要导入jQuery。

二、HTML部分

<div class="model_main">
        <ul class="dragsort" id="modelDragsort">
            <li>
                <div class="modelMain">
                    <div class="main">
                        <div class="modelTitle"><a href="javascript:void(0)"></a></div>
                        <div class="modelContent">
                            <span class="contentImage"><img src="../resources/images/wyzs_01.png"/></span>
                            <span class="title">XXXXXX</span>
                            <a>XXXXXX</a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="modelMain">
                    <div class="main">
                        <div class="modelTitle"><a href="javascript:void(0)"></a></div>
                        <div class="modelContent">
                            <span class="contentImage"><img src="../resources/images/wyzn_01.png"/></span>
                            <span class="title">XXXXXX</span>
                            <a>XXXXXX</a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="modelMain">
                    <div class="main">
                        <div class="modelTitle"><a href="javascript:void(0)"></a></div>
                        <div class="modelContent">
                            <span class="contentImage"><img src="../resources/images/cjwt_01.png"/></span>
                            <span class="title">XXXXXX</span>
                            <a>XXXXXX</a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="modelMain"> 
                    <div class="main">
                        <div class="modelTitle"><a href="javascript:void(0)"></a></div>
                        <div class="modelContent">
                            <span class="contentImage"><img src="../resources/images/bdxz_01.png"/></span>
                            <span class="title">XXXXXX</span>
                            <a>XXXXXX</a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

 

三、JS实现

$("#modelDragsort").dragsort({
        dragSelector: "div.modelTitle",      //容器拖动手柄
        dragBetween: true,                   //
        dragEnd:saveOrder,                   //执行之后的回调函数
        dragSelectorExclude : "div.modelContent",     //指定不会执行动作的元素
        placeHolderTemplate: "<li class='placeHolder'><div></div></li>",     //拖动列表的HTML部分
        scrollSpeed: 15            //拖动速度
    });

OVER!!!就是这么简单!!!!结果:

2014060500001

下面博主还是提供上门的CSS样式代码:

.model_main{
    width: 1001px;
    height: 270px;
    margin: 5px auto;
}

.model_main ul{
    margin: 0px;
    padding: 0px;
}

.model_main ul li{
    margin-left: 11px;
    float: left;
}

.model_main ul li:first-child{
    margin-left:0px;
}

.modelMain{
    width: 240px;
    height: 260px;
    margin-top: 0px;
    border: 1px solid #C5C5C5;
    float: left;
}

.modelMain .main{
    width: 232px;
    height: 252px;
    border: 3px solid #FFFFFF;
}


.modelTitle{
    width: 240px;
    margin: 0px 0px;
    padding-right: 10px;
    height: 30px;
    cursor: move;
}

.modelTitle a{
    display: block;
    width: 19px;
    height: 19px;
    background-image: url("../images/closeA_01.png");
    float: right;
    margin-top: 10px;
    margin-right: 20px;
    cursor: pointer;
}

.modelTitle a:hover{
    background-image: url("../images/closeA_02.png");
}

.modelContent{
    width: 210px;
    margin: 10px auto;
    height:200px;
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    cursor: pointer;
}

.modelContentHover{
    width: 210px;
    margin: 10px auto;
    height:200px;
    border: 1px solid #960010;
    background-color: #C11A16;
    cursor: pointer;
}

.modelContent .title{
    font-size: 20px;
    font-weight: bold;
    display: block;
    width: 156px;
    height:30px;
    text-align: center;
    margin: 0px auto;
    line-height: 30px;
}

.modelContent a{
    font-size: 14px;
    display: block;
    width: 156px;
    height:20px;
    text-align: center;
    margin: 0px auto;
    line-height: 20px;
    cursor: pointer;
}

.contentImage{
    display: block;
    width: 116px;
    height: 116px;
    margin: 13px auto;
}

解释说明:

dragSelector :CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。
dragSelectorExclude :CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是”input, textarea, a[href]”。
dragEnd :拖动结束后将被调用的回调函数。(想执行入库操作,就在这里做吧)
dragBetween :设置为“true”,如果你要启用多组列表之间拖动选定的列表。 默认值是false。
placeHolderTemplate :拖动列表的HTML部分。默认值是”<li></li>”.
scrollContainer :CSS选择器的元素,作为滚动容器,例如溢出的div设置为自动。 默认值是“窗口“.
scrollSpeed :一个数字,它代表了速度,页面拖动某一项时,将滚动容器外,较高使用价值的是速度和较低的值是较慢的。 如果设置为”0″以禁用滚动。默认值是”5″.

>>>插件下载:http://pan.baidu.com/s/1i320t3B

如未加特殊说明,此网站文章均为原创,转载必须注明出处。cmsblogs-chenssy » jquery.dragsort实现列表拖曳、排序

分享到:更多 ()

Chenssy's Blog | 致力打造个人精品博客

联系作者