JS拖动排序

1. 最终效果

1.png

2. 插件的下载以及代码

下载

引入js文件即可使用

注意看一下jquery链接有没有失效

jquery.dragsort可以去官网下载

下载之后是一个压缩包，解压后去sourceCode\dragsort文件夹里找js文件

代码

复制即可使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动排序</title>
    <style>
        *{margin: 0;padding: 0;}
        #list1 {
            width: 350px;
            border: 1px solid #000;
            padding: 10px;
            overflow: hidden;
            margin:auto;
        }
        #list1 li {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            float: left;
            list-style: none;
            margin: 5px;
            background: #ccc;
        }
        #list1 li div {
            text-align: center;
            height: 75%;
        }
        #list1 li div:before{
            display: inline-block;
            content: "";
            height: 100%;
            vertical-align: middle;
        }
        #list1 .placeHolderDom {
            background: #fff;
            border:1px dashed #000;
        }
        #list1 .te {
            width: 100%;
            display: block;
            height: 25%;
            border-bottom: 1px solid #000;
            text-align:center;
        }
    </style>
</head>

<body>
    <ul id="list1">
        <li><i class="te">拖动</i><div>0</div></li>
        <li><i class="te">拖动</i><div>1</div></li>
        <li><i class="te">拖动</i><div>2</div></li>
        <li><i class="te">拖动</i><div>3</div></li>
        <li><i class="te">拖动</i><div>4</div></li>
        <li><i class="te">拖动</i><div>5</div></li>
        <li><i class="te">拖动</i><div>6</div></li>
        <li><i class="te">拖动</i><div>7</div></li>
        <li><i class="te">拖动</i><div>8</div></li>
    </ul>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./jquery.dragsort-0.5.1.min.js"></script>
<script>
    $("#list1").dragsort({ dragSelector: $('.te'), dragBetween: false,dragEnd: textFn, placeHolderTemplate: "<li class='placeHolderDom'><div></div></li>" });
    function textFn () {
        console.log(123456);
    }
</script>

</html>

3. 介绍

官网也有详细的介绍，可以去看看

$("#list1").dragsort({ dragSelector: $('.te'), dragBetween: false,dragEnd: textFn, placeHolderTemplate: "<li class='placeHolderDom'><div></div></li>" ,scrollSpeed:1});
// dragSelector  触发拖动的元素
//dragBetween   如果要启用在选定列表之间拖动或允许将列表项拖动到列表之外以进行自动滚动的功能，请设置为“ true”。默认为false
//dragEnd  拖动结束后将调用的回调函数
//placeHolderTemplate  拖动之后的用来占位的元素
// scrollSpeed 这个参数一般不用，设置为一个数字，表示在将项目拖到滚动容器之外时页面将滚动的速度，数值越高，数值越低。设置为0以禁用滚动。预设值为5。

4. 可能产生的错误

121.png

jquery1.8后废弃了size() 用length代替。引用的jquery版本在是废除了.size()之后的版本。

可以引用老版本的 jquery。

最后编辑于：2020.12.04 11:06:26