Sortable实现多级分组拖动元素效果代码-html代码-BFW代码库

Sortable实现多级分组拖动元素效果代码

代码语言：html

所属分类：拖放

代码描述：Sortable实现多级分组拖动元素效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone"  type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>

    <script type="text/javascript">
       
        bready(function() {
            use(["Sortable.min"], function() {
                // Simple list
               var byId = function(id) {
                return document.getElementById(id);
            }, loadScripts = function(desc, callback) {
                var deps = [], key, idx = 0; for (key in desc) {
                    deps.push(key);
                }
                (function _next() {
                    var pid, name = deps[idx], script = document.createElement('script'); script.type = 'text/javascript'; script.src = desc[deps[idx]]; pid = setInterval(function() {
                        if (window[name]) {
                            clearTimeout(pid); deps[idx++] = window[name]; if (deps[idx]) {
                                _next();
                            } else {
                                callback.apply(null, deps);
                            }}},
                        30); document.getElementsByTagName('head')[0].appendChild(script);
                })()}, console = window.console; if (!console.log) {
                console.log = function() {
                    alert([].join.apply(arguments, ' '));
                };
            }
            Sortable.create(byId('foo'), {
                group: "words", animation: 150, store: {
                    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]);
                }}); Sortable.create(byId('bar'), {
                group: "words", animation: 150, onAdd: function(evt) {
                    console.log('onAdd.bar:', evt.item);
                }, onUpdate: function(evt) {
                    console.log('onUpdate.bar:', evt.item);
                }, onRemove: function(evt) {
                    console.log('onRemove.bar:', evt.item);
                }, onStart: function(evt) {
                    console.log('onStart.foo:', evt.item);
                }, onEnd: function(evt) {
                    console.log('onEnd.foo:', evt.item);
                }}); Sortable.create(byId('multi'), {
                animation: 150, draggable: '.tile', handle: '.tile__name'
.........完整代码请登录后点击上方下载按钮下载查看