表格拖拽,表格行拖拽排序,跨表格拖拽

由于开发时要时用到表格行拖拽排序功能，但是网上看了很多都不符合我的需求，我需要从一个表格拖动到另外一个表格，下面是我自己写的一个jquery表格拖拽排序插件：
tableDrag.js

//;(function($){
//	$.fn.extend({
//		"drag":function(){
//			
//			return this;
//		}
//	});
//})($);
(function(factory) {
	if (typeof define === 'function' && define.amd) {
		define([ 'jquery' ], factory);
	} else {
		factory(jQuery);
	}
}(function($) {
	var DRAG_THRESHOLD = 5;// 鼠标移动阈值(px)，直到拖动动作开始
	var counter = 0;// 生成事件名称空间
	var dragEvents = {
		START : 'mousedown',
		MOVE : 'mousemove',
		END : 'mouseup'
	};
	$.fn.tableDrag = function(options) {
		var dragging = false;
		var $clone;
		var dragElement;
		var $dragElement;
		var originalClientX, originalClientY; // 客户端(X|Y)开始拖动之前的位置
		var $elements; // 拖拽元素所在的元素列表
		var leftOffset;
		var topOffset;
		var eventNamespace;
		var oldStyle;

		if (typeof options === "string") {
			if (options === 'destroy') {
				if (this.eq(0).parent().data('drag-destroy')) {
					this.eq(0).parent().data('drag-destroy')();
				}
				return this;
			}
		}

		options = $.extend({
			"dragEndEvent" : "drag.end.tableDrag"
		}, options);
		var dragEndEvent = options["dragEndEvent"];
		$elements = this;
		eventNamespace = getEventNamespace();

		this.each(function() {
			var dragSelector = options.dragSelector;
			var self = this;// js对象
			var $this = $(this);// jquery对象
			if (dragSelector) {
				$this.on(dragEvents.START + eventNamespace, dragSelector, dragStartHandler);
			} else {
				$this.on(dragEvents.START + eventNamespace, dragStartHandler);
			}
			function dragStartHandler(e) {
				e.stopPropagation();
				var tagName = $(e.target).get(0).tagName;
				if (tagName == "BUTTON" || tagName == "I"||tagName=="INPUT") {
					$(e.target).trigger($(e.originalEvent), e);
					return;
				}

				dragging = true;
				originalClientX = e.clientX || e.originalEvent.clientX;
				originalClientY = e.clientY || e.originalEvent.clientY;
				dragElement = self;
				$dragElement = $this;
				$clone = clone($dragElement);
				leftOffset = $dragElement.offset().left;
				topOffset = $dragElement.offset().top;
				$clone.offset({
					left : leftOffset,
					top : topOffset
				});
				oldStyle = $dragElement.css("cssText");
				$dragElement.css(options.downStyle);
				$(document.body).append($clone);
			}
		});
		$(document).on(dragEvents.MOVE + eventNamespace, dragMoveHandler);// 绑定鼠标移动事件
		$(document).on(dragEvents.END + eventNamespace, dragEndHandler);// 绑定鼠标松开事件

		function dragMoveHandler(e) {
			e.stopPropagation();
			if (!dragging) {
				return;
			}
			var dragDistanceX = (e.clientX || e.originalEvent.clientX) - originalClientX;
			var dragDistanceY = (e.clientY || e.originalEvent.clientY) - originalClientY;
			var isMove = Math.abs(dragDistanceX) > DRAG_THRESHOLD || Math.abs(dragDistanceY) > DRAG_THRESHOLD;
			if (isMove) {
				$clone.offset({
					left : leftOffset + dragDistanceX,
					top : topOffset + dragDistanceY
				});
			}
		}

		function dragEndHandler(e) {
			e.stopPropagation();
			if ($dragElement) {
				$dragElement.css("cssText", oldStyle);
			}
			if (dragging) {
				dragging = false;
				var mouseY = (e.clientY || e.originalEvent.touches[0].clientY);
				var targetElement = getTargetElement($clone, $dragElement, $(options.targetElements));
				if (targetElement) {
					var targetY = $(targetElement).offset().top;
					var targetHeight = $(targetElement).height();
					if ((mouseY - targetY) < (targetHeight / 2)) {
						$(targetElement).before($dragElement);
					} else {
						$(targetElement).after($dragElement);
					}
					$(dragElement).parents("table").trigger(dragEndEvent, [ $(dragElement) ]);
				}
				$clone.remove();
			}
		}

		function destroy() {
			$(document).off(dragEvents.MOVE + eventNamespace).off(dragEvents.END + eventNamespace);
			if($elements){
				$elements.each(function() {
					var dragSelector = options.dragSelector;
					var $this = $(this);
					if (dragSelector) {
						$this.off(dragEvents.START + eventNamespace, dragSelector);
					} else {
						$this.off(dragEvents.START + eventNamespace);
					}
				});
				$elements.eq(0).parent().data('drag-destroy', null);
				$elements = null;
			}
			dragMoveHandler = null;
			dragEndHandler = null;
		}
		this.eq(0).parent().data('drag-destroy', destroy);
		//debugger;
		//console.log(this.eq(0).parent().data('drag-destroy'));
	};

	function getTargetElement($clone, $dragElement, $movableElements) {
		var cloneOffset = $clone.offset();
		var cloneWidth = $clone.width();
		var cloneHeight = $clone.height();
		var cloneLeftPosition = cloneOffset.left;
		var cloneRightPosition = cloneOffset.left + cloneWidth;
		var cloneTopPosition = cloneOffset.top;
		var cloneBottomPosition = cloneOffset.top + cloneHeight;
		var $currentElement;
		var horizontalMidPosition, verticalMidPosition;
		var offset, overlappingX, overlappingY, inRange;

		for (var i = 0; i < $movableElements.length; i++) {
			$currentElement = $movableElements.eq(i);
			if ($currentElement[0] === $dragElement[0]) {
				continue;
			}
			offset = $currentElement.offset();
			horizontalMidPosition = offset.left + 0.5 * $currentElement.width();
			verticalMidPosition = offset.top + 0.5 * $currentElement.height();

			overlappingX = (horizontalMidPosition < cloneRightPosition) && (horizontalMidPosition > cloneLeftPosition);
			overlappingY = (verticalMidPosition < cloneBottomPosition) && (verticalMidPosition > cloneTopPosition);
			inRange = overlappingX && overlappingY;
			if (inRange) {
				return $currentElement[0];
			}
		}
		return null;
	}

	function clone($element) {
		var $clone = $element.clone();
		$clone.css({
			position : 'absolute',
			width : $element.width(),
			height : $element.height(),
			'z-index' : 100000
		});
		return $clone;
	}

	function getEventNamespace() {
		counter += 1;
		return '.tableDrag-' + counter;
	}
}));

使用：

//给tr注册拖拽事件
$('#'+table_id+' tbody tr').tableDrag({
	downStyle : {
		"background-color" : "#4472C4",
		"cursor" : "move",
		"color" : "#FFFFFF"
	},
	targetElements : "#"+table_id+" tbody tr",
});
//添加拖拽回调事件
$('#'+table_id).on("drag.end.tableDrag", function(dragElement) {
	alert("拖拽完成");
});
//跨表格拖拽（如下代码，则只能从table1拖动到table2）
$('#table1 tbody tr').tableDrag({
	downStyle : {
		"background-color" : "#4472C4",
		"cursor" : "move",
		"color" : "#FFFFFF"
	},
	targetElements : "#table2 tbody tr",
});