与teambition相似的可拖动任务看板

与teambition相似的可拖动任务看板 前端实现
网站示例：
https://www.jq22.com/yanshi10850
和示例一样 我只负责在页面实现拖动，保存功能是另一位同事写，如果可行后面我再发出来
图片示例：

需要引用的js文件：
https://www.jq22.com/demo/Sortable-master20161122/Sortable.js

我页面上的内容是数据循环出来的，所以获取一下列表个数，便于循环加ID

//定义列表个数
var size=0;
// 获取任务列表数据
    function initTaskList() {
        $.get(basePath+"admin/task_manage/queryTaskClass", function(res){
            if (res.flag) {
                // 移除之前的列表
                $('.add_form').siblings().remove()
                // 生成列表节点
                res.obj.forEach(function(item) {
                    var $taskListItem = newTaskList(item);
                    initTaskItemList(item.typeId, {}, $taskListItem);
                    $('.content_list').append($taskListItem);
                    size++;
                });
                // 重新计算容器宽度
                initContentWidth();
                resetSize();
                //执行排序
             sort();

            }
        });
    }

关键代码：

function sort(){
    (function () {
        'use strict';
    
        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;
    
            console.log(size);
        if (!console.log) {
            console.log = function () {
                alert([].join.apply(arguments, ' '));
            };
        }
        //循环只是为了给1、2、分配给我的列表逐个加ID，并创建sortable
        for(var i=0;i<size;i++){
            $(".task_list").eq(i).attr('id','foo'+i);
            Sortable.create(byId('foo'+i), {
                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);}
            });
        }
        

    })();
    
    
    
    // Background
    document.addEventListener("DOMContentLoaded", function () {
        function setNoiseBackground(el, width, height, opacity) {
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");
    
            canvas.width = width;
            canvas.height = height;
    
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < height; j++) {
                    var val = Math.floor(Math.random() * 255);
                    context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
                    context.fillRect(i, j, 1, 1);
                }
            }
    
            el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
        }
    
        setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.02);
    }, false);
}

如果你的数据在页面上是固定的，就不需要循环，删掉改成逐个定义id

-------------------------------------------------------分隔线--------------------------------------------------------

大神把上传保存也做好了
修改后的引用文件
http://ceshi.youcaiyongyong.cn/themes/admin_htcyltd/public/assets/css/task/Sortable.js
关键代码也更改了
php

//更新全部数据方法
    private function update_all()
    {
   
        $userList = Db::name("hro_user_archives")->select()->toArray();
        foreach ($userList as $key => $value