Jquery UI拖拽元素固定

JavaScript 2021-11-12 509

需求:需要锁定某个拖拽元素,不可拖拽,不受其他拖拽元素排序带来的影响

方式1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        html {
            width: 100%;
            height: 100%;
            /*font-size: 100px;*/
        }

        a {
            text-decoration: none;
        }

        ul {
            padding-left: 0;
            margin: 0;
            list-style: none;
            width: 330px;
        }

        .static {
            color: red;
        }

        li {
            background-color: whitesmoke;
            border: 1px solid silver;
            width: 100px;
            padding: 2px;
            margin: 2px;
            float: left;
        }
    </style>

</head>
<body>
<!--拖拽过程中,固定某一个拖拽对象,且拖拽其他对象时不会发生移动-->
<ul id="sortable">
    <li>oranges</li>
    <li class="static">apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="static">pears</li>
    <li>mango</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>
    // 思想:保存固定的元素的位置,在排序期间,删除所有固定元素,在排序完成之前,重新插入元素
    $('#sortable').sortable({
        items: ':not(.static)', // 指定可排序的元素为非static的属性的元素
        start: function () { // 当排序开始时触发该事件
            $('.static', this).each(function () { // 遍历.static元素,向元素附加数据
                var $this = $(this);
                $this.data('pos', $this.index());
            });
        },
        change: function () { // 在排序期间触发该事件,除了当 DOM 位置改变时。
            $sortable = $(this);
            $statics = $('.static', this).detach(); // detach() 方法移除被选元素,包括所有文本和子节点。即移除所有.static元素
            $helper = $('<li></li>').prependTo(this); // 在<li></li>中插入内容,此处this指 #sortable
            $statics.each(function () {
                var $this = $(this);
                var target = $this.data('pos'); // 取回附加数据,即index
                // 1、$('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div。
                // $('li', $sortable).eq(target) 是所有的节点
                // 在$('li', $sortable).eq(target)中插入 $this
                $this.insertAfter($('li', $sortable).eq(target)); // 在之后插入 拖拽元素
            });
            $helper.remove();
        }
    });

</script>
</body>
</html>

解决方式2:

使用Sortable.js,但核心代码几乎是一样的,sortable的问答区,有人提过类似问题,作者也标记了该需求,但一直没做?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        html {
            width: 100%;
            height: 100%;
            /*font-size: 100px;*/
        }

        a {
            text-decoration: none;
        }

        ul {
            padding-left: 0;
            margin: 0;
            list-style: none;
            width: 330px;
        }

        .static {
            color: red;
        }

        li {
            background-color: whitesmoke;
            border: 1px solid silver;
            width: 100px;
            padding: 2px;
            margin: 2px;
            float: left;
        }
    </style>
</head>
<body>
<!--拖拽过程中,固定某一个拖拽对象,且拖拽其他对象时不会发生移动-->
<ul id="sortable">
    <li>oranges</li>
    <li class="static">apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="static">pears</li>
    <li>mango</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Sortable.min.js"></script>
<script>
    var sortable = new Sortable(document.getElementById('sortable'), {
        filter: ".static",
        onStart: function (/**Event*/evt) {
            $('.static').each(function () { // 遍历.static元素,向元素附加数据
                var $this = $(this);
                $this.data('pos', $this.index());
            });
        },
        onChange: function (/**Event*/evt,) {
            $sortable = document.getElementById('sortable');
            $statics = $('.static').detach(); // detach() 方法移除被选元素,包括所有文本和子节点。即移除所有.static元素
            $helper = $('<li></li>').prependTo($sortable); // 在<li></li>中插入内容,此处this指 #sortable
            $statics.each(function () {
                var $this = $(this);
                var target = $this.data('pos'); // 取回附加数据,即index
                // 1、$('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div。
                // $('li', $sortable).eq(target) 是所有的节点
                // 在$('li', $sortable).eq(target)中插入 $this
                $this.insertAfter($('li', $sortable).eq(target)); // 在之后插入 拖拽元素
            });
            $helper.remove();
        },
    })
</script>
</body>
</html>

效果:

标签:JavaScript

文章评论

评论列表

已有0条评论