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.forEach($scope.todos,
                                function(todo) {
                                    count += todo.done?0: 1;
                                }); return count;
                        }; $scope.sortableConfig = {
                            group: 'todo', animation: 150
                        }; 'Start End Add Update Remove Sort'.split(' ').forEach(function(name) {
                                $scope.sortableConfig['on'+name] = console.log.bind(console, name);
                            });
                    }]);
            });
        });
    </script>
    <style>
        html {
            background-image: -webkit-linear-gradient(bottom,#F4E2C9 20%,#F4D7C9 100%);
            background-image: -ms-linear-gradient(bottom,#F4E2C9 20%,#F4D7C9 100%);
            background-image: linear-gradient(tobottom,#F4E2C9 20%,#F4D7C9 100%)
        }

        html,body {
            margin: 0;
            padding: 0;
            position: relative;
            color: #464637;
            min-height: 100%;
            font-size: 20px;
            font-family: roboto,sans-serif;
            font-weight: 300
        }

        h1 {
            color: #ff3f00;
            font-size: 20px;
            font-family: roboto,sans-serif;
            font-weight: 300;
            text-align: center
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none
        }

        .container {
            width: 80%;
            margin: auto;
            min-width: 1100px;
            max-width: 1300px;
            position: relative
        }

@media(min-width:750px) and (max-width:970px) {
            .container {
                width: 100%;
                min-width: 750px
            }}

        .sortable-ghost {
            opacity: .2
        }

        #foo .sortable-drag {
            background: #daf4ff
        }

        img {
            border: 0;
            vertical-align: middle
        }

        .logo {
            top: 55px;
            left: 30px;
            position: absolute
        }

        .title {
            color: #fff;
            padding: 3px 10px;
            display: inline-block;
            position: relative;
            background-color: #ff7373;
            z-index: 1000
        }

        .title_xl {
            padding: 3px 15px;
            font-size: 40px
        }

        .tile {
            width: 22%;
            min-width: 245px;
            color: #ff7270;
            padding: 10px 30px;
            text-align: center;
            margin-top: 15px;
            margin-left: 5px;
            margin-right: 30px;
            background-color: #fff;
            display: inline-block;
            vertical-align: top
        }

        .tile__name {
            cursor: move;
            padding-bottom: 10px;
            border-bottom: 1px solid #ff7373
        }

        .tile__list {
            margin-top: 10px
        }

        .tile__list:last-child {
            margin-right: 0;
            min-height: 80px
        }

        .tile__list img {
            cursor: move;
            margin: 10px;
            border-radius: 100%
        }

        .block {
            opacity: 1;
            position: absolute
        }

        .block__list {
            padding: 20px 0;
            max-width: 360px;
            margin-top: -8px;
            margin-left: 5px;
            background-color: #fff
        }

        .block__list-title {
            margin: -20px 0 0;
            padding: 10px;
            text-align: center;
    .........完整代码请登录后点击上方下载按钮下载查看