111

web/main.html

@@ -26,6 +26,9 @@
   <script src="./src/icontains.js"  type="text/javascript"></script> 
   <!-- 多级下拉框选项 -->
   <script src="./src/comboTreePlugin.js"  type="text/javascript"></script>
+
+  <script src="./src/jquery.dad.min.js"  type="text/javascript"></script>
+  
   
   <!-- <script src="./src/doT.js"></script> -->
   <!-- <script src="./src/puble.js"></script> -->

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 = $('<span style="display:none"></span>')
+					newplace = $('<span style="display:none"></span>')
+					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 = $('<div></div>')
+					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)

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;
+                }
+            }
+        }
+
     }; 
 })();
 

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;
+                }
+            }
+        }
+
     }; 
 })();

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; }