JS设置拖动功能

设置拖动功能可以提高用户的操作体验，如果使用 bootstrap 框架可以参考以下代码：

	// modal  拖动
	$(document).on('mousedown', '.modal-dialog', function(e){
		var x = e.pageX;
		var y = e.pageY;
		var $modal = $(this);
		var top = parseInt($modal.css('top'));
		var left = parseInt($modal.css('left'));

		$(document).on('mousemove', function(e){
			var xx = e.pageX;
			var yy = e.pageY;	

			$modal.css({
				top: top+yy-y+'px',
				left: left+xx-x+'px'
			})
		})
	})
	$(document).on('mouseup', function(){
		$(document).off('mousemove')
	})

如果是一般的元素，需要在特定的区域可以拖动，拖动父级元素的区域，可以参考以下代码：

	// 拖动功能设置  
	// setMove('.btn', '.box', {top: 'margin-top', left: 'margin-right'})
	function setMove(moveBtn, moveBox, css){
		$(document).on('mousedown', moveBtn, function(e){
			var x = e.pageX;
			var y = e.pageY;
			var $box = $(this).parents(moveBox);
			var top = parseFloat($box.css(css.top));
			var left = parseFloat($box.css(css.left));

			$(document).on('mousemove', function(e){
				var xx = e.pageX;
				var yy = e.pageY;	

				var cssVal = {};
				cssVal[css.top] = top+yy-y+'px';
				cssVal[css.left] = left+xx-x+'px';
				$box.css(cssVal);
			})
		})
		$(document).on('mouseup', function(){
			$(document).on('mousemove', null);
			$(document).off('mousemove');
		})
	}