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

代码语言：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'
            }); [].forEach.call(byId('multi').getElementsByClassName('tile__list'), function(el) {
                Sortable.create(el, {
                    group: 'photo', animation: 150
                });
            }); var editableList = Sortable.create(byId('editable'), {
                animation: 150, filter: '.js-remove', onFilter: function(evt) {
                    evt.item.parentNode.removeChild(evt.item);
                }}); byId('addUser').onclick = function() {
                Ply.dialog('prompt', {
                    title: 'Add', form: {
                        name: 'name'
                    }}).done(function(ui) {
                    var el = document.createElement('li'); el.innerHTML = ui.data.name+'<i class="js-remove">鉁�</i>'; editableList.el.appendChild(el);
                });
            }; [{
                    name: 'advanced',
                    pull: true,
                    put: true
                },
                {
                    name: 'advanced',
                    pull: 'clone',
                    put: false
                },
                {
                    name: 'advanced',
                    pull: false,
                    put: true
                }].forEach(function(groupOpts, i) {
                    Sortable.create(byId('advanced-'+(i+1)), {
                        sort: (i != 1), group: groupOpts, animation: 150
                    });
                }); Sortable.create(byId('handle-1'), {
                    handle: '.drag-handle', animation: 150
                }); angular.module('todoApp', ['ng-sortable']).constant('ngSortableConfig', {
                    onEnd: function() {
                        console.log('default onEnd()');
                    }}).controller('TodoController', ['$scope', function($scope) {
                        $scope.todos = [{
                            text: 'learn angular', done: true
                        }, {
                            text: 'build an angular app', done: false
                        }]; $scope.addTodo = function() {
                            $scope.todos.push({
                                text: $scope.todoText, done: false
                            }); $scope.todoText = '';
                        }; $scope.remaining = function() {
                            var count = 0; angular.forEach($scope.todos, function(todo) {
                                count += todo.done?0: 1;
                            }); return count;
                        }; $scope.archive = function() {
                            var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) {
                                if (!todo.done)$scope.todos.push(todo);
                            });
                        };
                    }]).controller('TodoControllerNext', ['$scope', function($scope) {
                        $scope.todos = [{
                            text: 'learn Sortable', done: true
                        }, {
                            text: 'use ng-sortable', done: false
                        }, {
                            text: 'Enjoy', done: false
                        }]; $scope.remaining = function() {
                            var count = 0; angular.fo.........完整代码请登录后点击上方下载按钮下载查看