初始上传

public/static/ext/diyview/js/ddsort.js

@@ -0,0 +1,247 @@
+;(function ($) {
+	/**
+	 * Author: https://github.com/Barrior
+	 *
+	 * DDSort: drag and drop sorting.
+	 * @param {Object} options
+	 *        target[string]:        可选，jQuery事件委托选择器字符串，默认'li'
+	 *        cloneStyle[object]:    可选，设置占位符元素的样式
+	 *        floatStyle[object]:    可选，设置拖动元素的样式
+	 *        down[function]:        可选，鼠标按下时执行的函数
+	 *        move[function]:        可选，鼠标移动时执行的函数
+	 *        up[function]:        可选，鼠标抬起时执行的函数
+	 *        draggableArea[string]:可选，设置可拖拽的区域
+	 */
+	$.fn.DDSort = function (options) {
+		var $doc = $(document),
+			fnEmpty = function () {
+			},
+
+			settings = $.extend(true, {
+
+				down: fnEmpty,
+				move: fnEmpty,
+				up: fnEmpty,
+
+				target: 'li',
+				cloneStyle: {
+					'background-color': '#f7f8fa'
+				},
+				floatStyle: {
+					//用固定定位可以防止定位父级不是Body的情况的兼容处理，表示不兼容IE6，无妨
+					'position': 'fixed',
+					'box-shadow': '10px 10px 20px 0 #eee',
+					/*'webkitTransform': 'rotate(4deg)',
+					'mozTransform': 'rotate(4deg)',
+					'msTransform': 'rotate(4deg)',
+					'transform': 'rotate(4deg)'*/
+				},
+				draggableArea: ''
+
+			}, options);
+
+		return this.each(function () {
+
+			var that = $(this),
+				height = 'height',
+				width = 'width';
+
+			if (that.css('box-sizing') == 'border-box') {
+				height = 'outerHeight';
+				width = 'outerWidth';
+			}
+
+			var time; // 监听长按时间
+			var progress = 0; // 记录长按时长
+			that.on('mousedown.DDSort', settings.target, function (e) {
+				//只允许鼠标左键拖动
+				if (e.which != 1) {
+					return;
+				}
+				//防止表单元素失效
+				var tagName = e.target.tagName.toLowerCase();
+				if (tagName == 'input' || tagName == 'textarea' || tagName == 'select' || $(e.target).attr('stop-ddsort')) {
+					return;
+				}
+
+				// 记录长按时长
+				time = setInterval(() => {
+					progress++
+				}, 125);
+
+				var THIS = this,
+					$this = $(THIS),
+					offset = $this.offset(),
+					disX = e.pageX - offset.left,
+					disY = e.pageY - offset.top,
+
+					clone = $this.clone()
+						.css(settings.cloneStyle)
+						.css('height', $this[height]())
+						.empty(),
+
+					hasClone = 1,
+
+					//缓存计算
+					thisOuterHeight = $this.outerHeight(),
+					thatOuterHeight = that.outerHeight(),
+
+					//滚动速度
+					upSpeed = thisOuterHeight,
+					downSpeed = thisOuterHeight,
+					maxSpeed = thisOuterHeight * 3;
+
+				if (settings.draggableArea != "") {
+					//判断当前点击的DOM是否允许拖拽
+					var isDraggable = recursiveQuery($(e.target), settings.draggableArea);
+					// 特殊处理：带有该属性的禁用
+					if ($(e.target).parent().attr("data-disabled") || $(e.target).attr("data-disabled")) {
+						return;
+					}
+					if (!isDraggable) {
+						return;
+					}
+				}
+
+				var downIndex = $(THIS).index();
+				settings.down.call(THIS, downIndex);
+
+				$doc.on('mousemove.DDSort', function (e) {
+					if (progress === 0) return; // 如果没有长按则不能拖拽
+					if (hasClone) {
+						$this.before(clone)
+							.css('width', $this[width]())
+							.css(settings.floatStyle)
+							.appendTo($this.parent());
+
+						hasClone = 0;
+					}
+
+					var left = e.pageX - disX,
+						top = e.pageY - disY,
+
+						prev = clone.prev(),
+						next = clone.next().not($this);
+
+					var gap = $(window).scrollTop();
+					var calculate = top - gap;
+
+					//检测是否滚动了
+					top = ((top - $(window).scrollTop()) != top) ? calculate : top;
+
+					$this.css({
+						left: left,
+						top: top,
+						zIndex: 999
+					});
+
+					//向上排序
+					if (prev.length && top < (prev.offset().top - gap) + prev.outerHeight() / 2) {
+
+						clone.after(prev);
+
+						//向下排序
+					} else if (next.length && top + thisOuterHeight > (next.offset().top - gap) + next.outerHeight() / 2) {
+
+						clone.before(next);
+
+					}
+
+					/**
+					 * 处理滚动条
+					 * that是带着滚动条的元素，这里默认以为that元素是这样的元素（正常情况就是这样），如果使用者事件委托的元素不是这样的元素，那么需要提供接口出来
+					 */
+					var thatScrollTop = that.scrollTop(),
+						thatOffsetTop = that.offset().top,
+						scrollVal;
+
+					//向上滚动
+					if (top < thatOffsetTop) {
+
+						downSpeed = thisOuterHeight;
+						upSpeed = ++upSpeed > maxSpeed ? maxSpeed : upSpeed;
+						scrollVal = thatScrollTop - upSpeed;
+
+						//向下滚动
+					} else if (top + thisOuterHeight - thatOffsetTop > thatOuterHeight) {
+
+						upSpeed = thisOuterHeight;
+						downSpeed = ++downSpeed > maxSpeed ? maxSpeed : downSpeed;
+						scrollVal = thatScrollTop + downSpeed;
+					}
+
+					that.scrollTop(scrollVal);
+
+					var index = recursiveQueryIndex($(THIS));
+					settings.beforeIndex = index; // 当前拖拽元素
+					settings.move.call(THIS, index);
+
+				})
+					.on('mouseup.DDSort', function () {
+						clearInterval(time);
+						progress = 0;
+						$doc.off('mousemove.DDSort mouseup.DDSort');
+
+						//click的时候也会触发mouseup事件，加上判断阻止这种情况
+						if (!hasClone) {
+							clone.before($this.removeAttr('style')).remove();
+							settings.afterIndex = $this.index();
+							settings.up.call(THIS, settings.beforeIndex, settings.afterIndex);
+						}
+					});
+
+				return false;
+			});
+		});
+	};
+
+	//当前递归次数
+	var currentRecursiveCount = 0;
+
+	//最大递归次数
+	var recursiveMaxCount = 20;
+
+	/**
+	 * 递归查询当前区域是否允许拖拽
+	 */
+	function recursiveQuery(o, draggableArea) {
+		if (o.hasClass(draggableArea)) {
+			//允许拖拽，清空递归次数
+			currentRecursiveCount = 0;
+			// console.log($(o));
+			return true;
+		} else {
+			if (currentRecursiveCount <= recursiveMaxCount) {
+				currentRecursiveCount++;
+				return recursiveQuery(o.parent(), draggableArea);
+			} else {
+				//清空递归次数
+//				console.log("清空递归次数");
+				currentRecursiveCount = 0;
+				return false;
+			}
+		}
+	}
+
+	/**
+	 * 递归查询当前拖拽的下标
+	 */
+	function recursiveQueryIndex(o) {
+		if (o.hasClass("draggable-element")) {
+			//允许拖拽，清空递归次数
+			currentRecursiveCount = 0;
+			return $(o).attr("data-index");
+		} else {
+			if (currentRecursiveCount <= recursiveMaxCount) {
+				currentRecursiveCount++;
+				return recursiveQueryIndex(o.parent());
+			} else {
+				//清空递归次数
+				// console.log("清空递归次数");
+				currentRecursiveCount = 0;
+				return -1;
+			}
+		}
+	}
+
+})(jQuery);