jquery.dragsort实现列表拖曳排序

Posted 2020-07-28

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

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

一、导入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！！！就是这么简单！！！！结果：

下面博主还是提供上门的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″.