拖拽插件SortableJS的简单使用

在项目中,经常会遇到一些涉及到拖拽的需求,github上面有一个SortableJS的插件,支持Vue,React,Angular等多种框架,实现效果很好,基本可以满足大部分的需求,下面就第一次在jquery中的使用做个简单的demo记录。

  1. 引入文件Sortable.min.js
  2. 指定包裹容器的id
  3. 根据api开始创建使用即可

拖拽插件SortableJS的简单使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Sortable. No jQuery.</title>
        <link href="st/app.css" rel="stylesheet" type="text/css" /><!--可去掉,不影响功能-->     
    </head>
    <body>
        <div class="container" style="height: 520px">
            <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
                <div class="layer title">List A</div>
                <ul id="foo" class="block__list block__list_words">
                    <li>1aaaбегемот测试</li>
                    <li>2корм</li>
                    <li>3антон</li>
                    <li>4сало</li>
                    <li>5железосталь</li>
                    <li>6валик</li>
                    <li>7кровать</li>
                    <li>8краб</li>
                </ul>
            </div>
        </div>
        <script src="Sortable.min.js"></script>
        <script>
            Sortable.create(document.getElementById('foo'), {
                animation: 150,
                store: {//缓存到localStorage
                    get: function(sortable) {
                        var order = localStorage.getItem(sortable.options.group);
                        return order ? order.split('|') : [];
                    },
                    set: function(sortable) {
                        var order = sortable.toArray();
                        localStorage.setItem(sortable.options.group, order.join('|'));
                    }
                },
                onAdd: function(evt) {
                    console.log('onAdd.foo:', [evt.item, evt.from]);
                },
                onUpdate: function(evt) {
                    console.log('onUpdate.foo:', [evt.item, evt.from]);
                },
                onRemove: function(evt) {
                    console.log('onRemove.foo:', [evt.item, evt.from]);
                },
                onStart: function(evt) {
                    console.log('onStart.foo:', [evt.item, evt.from]);
                },
                onSort: function(evt) {
                    console.log('onStart.foo:', [evt.item, evt.from]);
                },
                onEnd: function(evt) {
                    console.log('onEnd.foo:', [evt.item, evt.from]);
                }
            });
        </script>
    </body>
</html>

官方文档地址:https://github.com/SortableJS/Sortable
demo演示地址:http://sortablejs.github.io/Sortable/

上一篇:深入理解WebRTC : Real-time Communication Between Browsers


下一篇:工具方法: jQuery.方法() $.extend (小计)