<!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>

27、 jq 拖拽的更多相关文章

  1. jq 拖拽

    1.尼玛, move事件的时候忘了加ev,找了一个多小时 <!DOCTYPE html> <html> <head lang="en"> < ...

  2. jq拖拽插件

    (function ($) { var move = false; //标记控件是否处于被拖动状态 var dragOffsetX = 0; //控件左边界和鼠标X轴的差 var dragOffset ...

  3. Jquery拖拽，拖动排序插件

    上github搜jquery-sortable <!-- jq拖拽排序 --> <script src="${contextPath}/static/excelTable/ ...

  4. jQ插件--时间线插件和拖拽API

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...

  5. JQ实现3D拖拽效果

    <!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...

  6. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  7. jq实现拖拽

    $("body").delegate( ".msg-layer",{ mousedown: function (e) { var el = $(".m ...

  8. Jquery 多行拖拽图片排序 jq优化

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 不断优化，重构我的代码-----拖拽jquery插件

    最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionEl ...

随机推荐

  1. 浅谈MFC类CrackMe中消息处理函数查找方法

    最近一个学姐发给我了一份CrackMe希望我解一下,其中涉及到了MFC的消息函数查找的问题,就顺便以此为例谈一下自己使用的消息函数查找的方法.本人萌新,如果有任何错漏与解释不清的地方,欢迎各路大佬指正 ...

  2. Python 和 Scikit-Learn

    Reference:http://mp.weixin.qq.com/s?src=3&timestamp=1474985436&ver=1&signature=at24GKibw ...

  3. 使用python实现深度神经网络 3（转）

    使用python实现深度神经网络 3 快速计算梯度的魔法--反向传播算法 快速计算梯度的魔法--反向传播算法 一.实验介绍 1.1 实验内容 第一次实验最后我们说了,我们已经学习了深度学习中的模型mo ...

  4. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  5. Python 能做什么？

    Python 能做什么? Python具有简单.易学.免费.开源.可移植.可扩展.可嵌入.面向对象等优点,我所关注的是网络爬虫方面,2018即将到来,我准备步入python的世界. Hello,wor ...

  6. mybatis插入一个对象后获取表中自增的主键Id并且传入到插入的的对象中，方便将对象中其他属性赋值给其他以前表主键Id作为非空字段的表

    原本的sql语句为: <insert id="xx" parameterType="com.hrt.partner.model.ShopInsert"&g ...

  7. 关于现在互联网是否还有机会类的价值文章，为什么有人掉进互联网创业的坑里，可能因为ta不懂这些

     --也是带着问题看这篇文章的,面临BAT时代的互联网创业者如何带领自己的公司存活成长,本文有些理念很有意思,前辈企业家是抓住机会干企业,现代化是发现问题最先解决干企业,最难的.同仁意愿不强的大问题才 ...

  8. MVP模式和Clean模式

    从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...

  9. 转 Java虚拟机5：Java垃圾回收（GC）机制详解

    转 Java虚拟机5:Java垃圾回收(GC)机制详解 Java虚拟机5:Java垃圾回收(GC)机制详解 哪些内存需要回收? 哪些内存需要回收是垃圾回收机制第一个要考虑的问题,所谓“要回收的垃圾”无 ...

  10. POSTMAN发送WebService接口

    WebService是一种跨编程语言和跨操作系统平台的远程调用技术 http://www.oorsprong.org/websamples.countryinfo/countryinfoservice ...