diff --git a/web/main.html b/web/main.html index 024ee3f..6ede4d0 100644 --- a/web/main.html +++ b/web/main.html @@ -26,6 +26,9 @@ + + + diff --git a/web/src/jquery.dad.min.js b/web/src/jquery.dad.min.js new file mode 100644 index 0000000..590c0c6 --- /dev/null +++ b/web/src/jquery.dad.min.js @@ -0,0 +1,267 @@ +/*! + * jquery.dad.js v1 (http://konsolestudio.com/dad) + * Author William Lima + */ +;(function ($) { + 'use strict' + function O_dad() { + var self = this + this.x = 0 + this.y = 0 + this.target = false + this.clone = false + this.placeholder = false + this.cloneoffset = { x: 0, y: 0 } + this.move = function (e) { + self.x = e.pageX + self.y = e.pageY + if (self.clone != false && self.target != false) { + self.clone.css({ + top: self.y - self.cloneoffset.y, + left: self.x - self.cloneoffset.x, + }) + } else { + } + } + $(window).on('mousemove', function (e) { + self.move(e) + }) + } + $.prototype.dad = function (opts) { + var me, defaults, options + me = this + defaults = { + target: '>div', + draggable: false, + placeholder: 'drop here', + callback: false, + containerClass: 'dad-container', + childrenClass: 'dads-children', + cloneClass: 'dads-children-clone', + active: true, + } + options = $.extend({}, defaults, opts) + $(this).each(function () { + var mouse, + target, + dragClass, + active, + callback, + placeholder, + daddy, + childrenClass, + jQclass, + cloneClass + mouse = new O_dad() + active = options.active + daddy = $(this) + if (!daddy.hasClass('dad-active') && active == true) + daddy.addClass('dad-active') + childrenClass = options.childrenClass + cloneClass = options.cloneClass + jQclass = '.' + childrenClass + daddy.addClass(options.containerClass) + target = daddy.find(options.target) + placeholder = options.placeholder + callback = options.callback + dragClass = 'dad-draggable-area' + me.addDropzone = function (selector, func) { + $(selector) + .on('mouseenter', function () { + if (mouse.target != false) { + mouse.placeholder.css({ display: 'none' }) + mouse.target.css({ display: 'none' }) + $(this).addClass('active') + } + }) + .on('mouseup', function () { + if (mouse.target != false) { + mouse.placeholder.css({ display: 'block' }) + mouse.target.css({ display: 'block' }) + func(mouse.target) + dad_end() + } + $(this).removeClass('active') + }) + .on('mouseleave', function () { + if (mouse.target != false) { + mouse.placeholder.css({ display: 'block' }) + mouse.target.css({ display: 'block' }) + } + $(this).removeClass('active') + }) + } + me.getPosition = function () { + var positionArray = [] + $(this) + .find(jQclass) + .each(function () { + positionArray[$(this).attr('data-dad-id')] = parseInt( + $(this).attr('data-dad-position') + ) + }) + return positionArray + } + me.activate = function () { + active = true + if (!daddy.hasClass('dad-active')) { + daddy.addClass('dad-active') + } + return me + } + me.deactivate = function () { + active = false + daddy.removeClass('dad-active') + return me + } + $(document).on('mouseup', function () { + dad_end() + }) + var order = 1 + target.addClass(childrenClass).each(function () { + if ($(this).data('dad-id') == undefined) { + $(this).attr('data-dad-id', order) + } + $(this).attr('data-dad-position', order) + order++ + }) + function update_position(e) { + var order = 1 + e.find(jQclass).each(function () { + $(this).attr('data-dad-position', order) + order++ + }) + } + function dad_end() { + if (mouse.target != false && mouse.clone != false) { + if (callback != false) { + callback(mouse.target) + } + var appear = mouse.target + var desapear = mouse.clone + var holder = mouse.placeholder + var bLeft = 0 + Math.floor(parseFloat(daddy.css('border-left-width'))) + var bTop = 0 + Math.floor(parseFloat(daddy.css('border-top-width'))) + if ($.contains(daddy[0], mouse.target[0])) { + mouse.clone.animate( + { + top: + mouse.target.offset().top - + daddy.offset().top - + bTop, + left: + mouse.target.offset().left - + daddy.offset().left - + bLeft, + }, + 300, + function () { + appear + .css({ visibility: 'visible' }) + .removeClass('active') + desapear.remove() + } + ) + } else { + mouse.clone.fadeOut(300, function () { + desapear.remove() + }) + } + holder.remove() + mouse.clone = false + mouse.placeholder = false + mouse.target = false + update_position(daddy) + } + $('html,body').removeClass('dad-noSelect') + } + function dad_update(obj) { + if (mouse.target != false && mouse.clone != false) { + var newplace, origin + origin = $('') + newplace = $('') + if (obj.prevAll().hasClass('active')) { + obj.after(newplace) + } else { + obj.before(newplace) + } + mouse.target.before(origin) + newplace.before(mouse.target) + mouse.placeholder.css({ + top: mouse.target.offset().top - daddy.offset().top, + left: mouse.target.offset().left - daddy.offset().left, + width: mouse.target.outerWidth() - 10, + height: mouse.target.outerHeight() - 10, + }) + origin.remove() + newplace.remove() + } + } + var jq = options.draggable != false ? options.draggable : jQclass + daddy.find(jq).addClass(dragClass) + daddy.find(jq).on('mousedown touchstart', function (e) { + if (mouse.target == false && e.which == 1 && active == true) { + if (options.draggable != false) { + mouse.target = daddy.find(jQclass).has(this) + } else { + mouse.target = $(this) + } + mouse.clone = mouse.target.clone() + mouse.target + .css({ visibility: 'hidden' }) + .addClass('active') + mouse.clone.addClass(cloneClass) + daddy.append(mouse.clone) + mouse.placeholder = $('
') + mouse.placeholder.addClass('dads-children-placeholder') + mouse.placeholder + .css({ + top: mouse.target.offset().top - daddy.offset().top, + left: + mouse.target.offset().left - + daddy.offset().left, + width: mouse.target.outerWidth() - 10, + height: mouse.target.outerHeight() - 10, + lineHeight: mouse.target.height() - 18 + 'px', + textAlign: 'center', + }) + .text(placeholder) + daddy.append(mouse.placeholder) + var difx, dify + var bLeft = Math.floor( + parseFloat(daddy.css('border-left-width')) + ) + var bTop = Math.floor( + parseFloat(daddy.css('border-top-width')) + ) + difx = + mouse.x - + mouse.target.offset().left + + daddy.offset().left + + bLeft + dify = + mouse.y - + mouse.target.offset().top + + daddy.offset().top + + bTop + mouse.cloneoffset.x = difx + mouse.cloneoffset.y = dify + mouse.clone + .removeClass(childrenClass) + .css({ + position: 'absolute', + top: mouse.y - mouse.cloneoffset.y, + left: mouse.x - mouse.cloneoffset.x, + }) + $('html,body').addClass('dad-noSelect') + } + }) + $(jQclass).on('mouseenter', function () { + dad_update($(this)) + }) + }) + return this + } +})(jQuery) diff --git a/web/src/x.min.js b/web/src/x.min.js index ab20d5c..1396a06 100644 --- a/web/src/x.min.js +++ b/web/src/x.min.js @@ -3802,6 +3802,13 @@ var X = window.X || { } } } + + // $('.layui-row').dad({ + // draggable: '.layui-card' + // }); + $('.layui-row').dad({ + // draggable + }); }) }, @@ -3903,14 +3910,20 @@ var X = window.X || { X.api('dashboard/','post',{id:X.DATA['dashboard_id']},function(d){ var modellist=[]; for(let i in d){ - modellist.push(d[i]['sort']); + var arr = { + sort:d[i]['sort'], + report_id:d[i]['report_id'] + } + modellist.push(arr); } - modellist.sort(); //排序 + + modellist.sort( X.pageLogic['dashboard'].compare("sort")); + for(let i in modellist){ for(let z in d){ if(modellist[i] == d[z]['sort']){ //渲染模板和数据 - // console.log(d[z]); + console.log(d[z]); X.laytpldata("#kanban-model-box-dot",d[z],null,function(html){ $('#model-box').append(html); X.pageLogic['dashboard'].fillmodeldata(d[z]); @@ -3918,14 +3931,26 @@ var X = window.X || { } } } - // $(".layui-col").Tdrag({ - // scope:".layui-row", - // pos:true, - // dragChange:true - // }); + }) }, + //定义一个比较器--降序排列 + compare:function(propertyName) { + console.log(propertyName) + return function(object1, object2) { + var value1 = object1[propertyName]; + var value2 = object2[propertyName]; + if(value2 < value1) { + return 1; + } else if(value2 > value1) { + return -1; + } else { + return 0; + } + } + } + }; })(); diff --git a/web/srczip/logic/dashboard.js b/web/srczip/logic/dashboard.js index afd3d23..e174e88 100644 --- a/web/srczip/logic/dashboard.js +++ b/web/srczip/logic/dashboard.js @@ -416,6 +416,13 @@ } } } + + // $('.layui-row').dad({ + // draggable: '.layui-card' + // }); + $('.layui-row').dad({ + // draggable + }); }) }, @@ -517,14 +524,20 @@ X.api('dashboard/','post',{id:X.DATA['dashboard_id']},function(d){ var modellist=[]; for(let i in d){ - modellist.push(d[i]['sort']); + var arr = { + sort:d[i]['sort'], + report_id:d[i]['report_id'] + } + modellist.push(arr); } - modellist.sort(); //排序 + + modellist.sort( X.pageLogic['dashboard'].compare("sort")); + for(let i in modellist){ for(let z in d){ if(modellist[i] == d[z]['sort']){ //渲染模板和数据 - // console.log(d[z]); + console.log(d[z]); X.laytpldata("#kanban-model-box-dot",d[z],null,function(html){ $('#model-box').append(html); X.pageLogic['dashboard'].fillmodeldata(d[z]); @@ -532,13 +545,25 @@ } } } - // $(".layui-col").Tdrag({ - // scope:".layui-row", - // pos:true, - // dragChange:true - // }); + }) }, + //定义一个比较器--降序排列 + compare:function(propertyName) { + // console.log(propertyName) + return function(object1, object2) { + var value1 = object1[propertyName]; + var value2 = object2[propertyName]; + if(value2 < value1) { + return 1; + } else if(value2 > value1) { + return -1; + } else { + return 0; + } + } + } + }; })(); diff --git a/web/static/css/style.css b/web/static/css/style.css index df59e82..11d257a 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -22,6 +22,51 @@ .layui-anim-downbit { max-height: 350px; overflow-y: auto; overflow-x: hidden; } /* .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this { background-color: #f6f8fa !important; } */ +.dad-noSelect,.dad-noSelect *{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: -webkit-grabbing !important; + cursor: -moz-grabbing !important; +} + +.dad-container{ + position: relative; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.dad-container::after{ + content: ''; + clear: both !important; + display: block; +} +.dad-active .dad-draggable-area{ + cursor: -webkit-grab; + cursor: -moz-grab; +} +.dads-children-clone{ + opacity: 0.8; + z-index: 9999; + pointer-events: none; +} +.dads-children-placeholder{ + overflow: hidden; + position: absolute !important; + box-sizing: border-box; + border:2px dashed #639BF6; + margin:5px; + text-align: center; + color: #639BF6; + font-weight: bold; +} + .username { color: #67729d; margin-right: 16px; } .layui-project { position:absolute; top: 0; left: 80px; ;} .layui-nav-bar { width: 0px !important; height: 0px !important; }