27、 jq 拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: darkgoldenrod;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			//工具方法
			//$.extend({})
			$.extend({
				aaa : function(){
					return 'aaa';
				},
				bbb : function(){
					return 'bbb';
				},
				ccc : function(){
					return 'ccc';
				},
				//1. 去除字符串中左边的空格(封装成 工具方法)
				trimLeft : function(str){
					return str.replace(/^\s+/g,'');
				},
				//2. 去除字符串中右边的空格(封装成 工具方法)
				trimRight : function(str){
					return str.replace(/\s+$/g,'');
				}
			});
//			alert($.aaa());
//			alert($.bbb());
//			alert($.ccc());
			//对象方法
			//$.fn.extend({})
			
			$.fn.extend({
				aaa : function(){
					return 'aaa';
				},
				bbb : function(){
					return 'bbb';
				},
				ccc : function(){
					return 'ccc';
				},
				//1. 去除字符串中左边的空格(封装成 对象方法)
				trimLeft : function(str){
					return str.replace(/^\s+/g,'');
				},
				//2. 去除字符串中右边的空格(封装成 对象方法)
				trimRight : function(str){
					return str.replace(/\s+$/g,'');
				},
				//3. 封装拖拽的方法(封装成 对象方法)
				drag : function(){
					var disX = null;
					var disY = null;
					var that = this; //jQ对象
					this.mousedown(function(evt){
//						alert(this);  //原生this对象:代表当前所触发事件的对象
						disX = evt.pageX - $(this).offset().left;
						disY = evt.pageY - $(this).offset().top;
						//文档添加移动事件
						$(document).mousemove(function(evt){
							that.css({left : evt.pageX - disX,top : evt.pageY - disY});
						})
						//鼠标抬起事件
						$(document).mouseup(function(){
							$(this).off();
						})
					})
				}
			})
//			alert($().aaa());
//			alert($().bbb());
//			alert($().ccc());
			
			//1. 去除字符串中左边的空格(封装成 工具方法和对象方法)
//			alert('(' + $.trimLeft('      a    b    ') + ')');
//			alert('(' + $().trimLeft('      a    b    ') + ')');
//			alert('(' + $.trimRight('      a    b    ') + ')');
//			alert('(' + $().trimRight('      a    b    ') + ')');
			//2. 去除字符串中右边的空格(封装成 工具方法和对象方法)
			//3. 封装拖拽的方法(封装成 对象方法)
			//事件中的this : 表示原生对象(当前对象)
			//jQuery对象调用的方法中,this : 表示jQuery对象
			$('#box').drag();
		</script>
	</body>
</html>

posted @ 2018-07-06 21:30  飞刀还问情  阅读(171)  评论(0编辑  收藏  举报