1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			#box{
  8. 				width: 100px;
  9. 				height: 100px;
  10. 				background: darkgoldenrod;
  11. 				position: absolute;
  12. 			}
  13. 		</style>
  14. 	</head>
  15. 	<body>
  16. 		<div id="box">
  18. 		</div>
  19. 		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
  20. 		<script type="text/javascript">
  21. 			//工具方法
  22. 			//$.extend({})
  23. 			$.extend({
  24. 				aaa : function(){
  25. 					return 'aaa';
  26. 				},
  27. 				bbb : function(){
  28. 					return 'bbb';
  29. 				},
  30. 				ccc : function(){
  31. 					return 'ccc';
  32. 				},
  33. 				//1. 去除字符串中左边的空格（封装成 工具方法）
  34. 				trimLeft : function(str){
  35. 					return str.replace(/^\s+/g,'');
  36. 				},
  37. 				//2. 去除字符串中右边的空格（封装成 工具方法）
  38. 				trimRight : function(str){
  39. 					return str.replace(/\s+$/g,'');
  40. 				}
  41. 			});
  42. //			alert($.aaa());
  43. //			alert($.bbb());
  44. //			alert($.ccc());
  45. 			//对象方法
  46. 			//$.fn.extend({})
  48. 			$.fn.extend({
  49. 				aaa : function(){
  50. 					return 'aaa';
  51. 				},
  52. 				bbb : function(){
  53. 					return 'bbb';
  54. 				},
  55. 				ccc : function(){
  56. 					return 'ccc';
  57. 				},
  58. 				//1. 去除字符串中左边的空格（封装成 对象方法）
  59. 				trimLeft : function(str){
  60. 					return str.replace(/^\s+/g,'');
  61. 				},
  62. 				//2. 去除字符串中右边的空格（封装成 对象方法）
  63. 				trimRight : function(str){
  64. 					return str.replace(/\s+$/g,'');
  65. 				},
  66. 				//3. 封装拖拽的方法（封装成 对象方法）
  67. 				drag : function(){
  68. 					var disX = null;
  69. 					var disY = null;
  70. 					var that = this; //jQ对象
  71. 					this.mousedown(function(evt){
  72. //						alert(this);  //原生this对象：代表当前所触发事件的对象
  73. 						disX = evt.pageX - $(this).offset().left;
  74. 						disY = evt.pageY - $(this).offset().top;
  75. 						//文档添加移动事件
  76. 						$(document).mousemove(function(evt){
  77. 							that.css({left : evt.pageX - disX,top : evt.pageY - disY});
  78. 						})
  79. 						//鼠标抬起事件
  80. 						$(document).mouseup(function(){
  81. 							$(this).off();
  82. 						})
  83. 					})
  84. 				}
  85. 			})
  86. //			alert($().aaa());
  87. //			alert($().bbb());
  88. //			alert($().ccc());
  90. 			//1. 去除字符串中左边的空格（封装成 工具方法和对象方法）
  91. //			alert('(' + $.trimLeft('      a    b    ') + ')');
  92. //			alert('(' + $().trimLeft('      a    b    ') + ')');
  93. //			alert('(' + $.trimRight('      a    b    ') + ')');
  94. //			alert('(' + $().trimRight('      a    b    ') + ')');
  95. 			//2. 去除字符串中右边的空格（封装成 工具方法和对象方法）
  96. 			//3. 封装拖拽的方法（封装成 对象方法）
  97. 			//事件中的this ： 表示原生对象（当前对象）
  98. 			//jQuery对象调用的方法中，this ： 表示jQuery对象
  99. 			$('#box').drag();
  100. 		</script>
  101. 	</body>
  102. </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. 搭建SpringCloud-Eureka 注册中心以及服务提供与调用 快速了解 SpringCloud-Eureka

    原文地址:  搭建SpringCloud-Eureka 注册中心以及服务提供与调用   纸上得来终觉浅,绝知此事要躬行啊~果然看着很easy,自己搞起来就是各种坑~各位看官,容我慢慢道来~ 关于spr ...

  2. 初学vue出现空格警告的原因及其解决办法

    初学vue自己新建一个vue项目来做学习demo.不过在编写代码时一直出现空格不规范的警告.严重影响初学者的热情.错误如下图所示.(这样的错误很多,但大概翻译成中文的意思都是说空格使用不规范.) 这是 ...

  3. bootstrap-实现loading效果

    可以使用bootstrap的模态框(modal.js),使用它我们可以做出loading效果. html <!-- loading --> <div class="moda ...

  4. shell编程学习笔记（十）：Shell中的for循环

    shell编程中可以实现for循环遍历 先来写一个最简单的吧,循环输出从1到10,脚本内容为: #! /bin/sh for i in {1..10} do echo $i done 上面的代码从1到 ...

  5. isPrototypeOf 与 instanceof区别

    1.代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  6. 记录一次使用VS2015编译错误的原因查找(boost+gdal)

    编译错误说明 在一个解决方案中的项目A中使用到了boost,完全没有问题.在项目B中也使用了boost库,编译的时候就产生了一堆错误. 原因查找 两个项目通过对比,唯一的不同就是项目B使用了gdal库 ...

  7. Couldn't find log associated with operation handle: OperationHandle [opType=EXECUTE_STATEMENT, getHandleIdentifier ()=5687ff62-aa71-4b47-af6c-89f6a3f7a1fe]

    这个异常的出现是因为hive-site-xml中的hive.server2.logging.operation.log.location属性未配置正确: 修改为: <property> & ...

  8. 手把手教你用Strace诊断问题[转]

    早些年,如果你知道有个 strace 命令,就很牛了,而现在大家基本都知道 strace 了,如果你遇到性能问题求助别人,十有八九会建议你用 strace 挂上去看看,不过当你挂上去了,看着满屏翻滚的 ...

  9. 【C++】C++中的基本内置类型

    基本数据类型 下面这张表是C++支持的基本数据类型 类型 含义 最小尺寸 bool 布尔 未定义 char 字符 8位 wchar_t 宽字符 16位 char16_t Unicode字符 16位 c ...

  10. 利用git 进行多人协作开发

    现在,大部分项目都是用 git 来管理代码的,但当项目变大.多人协作时,git 的使用就变得复杂了,这时就需要在 git 使用的流程上来思考如何更优的使用 git. 对于大部分 web 项目而言,并不 ...