☰

jQuery-Extensions-freeDragJS

jQuery-Extensions-freeDragJS是一个非常简单的jQuery 拖拽扩展，同时兼容移动设备与pc设备

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/461097/1156609/jQuery-Extensions-freeDragJS.js 

  1. // ==UserScript==
  2. // @name         jQuery-Extensions-freeDragJS
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  jQuery-Extensions-freeDragJS是一个非常简单的jQuery 拖拽扩展，同时兼容移动设备与pc设备
  6. // @author       tutu辣么可爱(greasyfork)/IcedWatermelonJuice(github)
  7. // @grant        none
  8. // ==/UserScript==
  9. (function() {
  10. 	const aboutFreeDragJS = {
  11. 		"name": "jQuery-Extensions-freeDragJS",
  12. 		"version": "1.0",
  13. 		"description": "jQuery-Extensions-freeDragJS是一个非常简单的jQuery 拖拽扩展，同时兼容移动设备与pc设备",
  14. 		"author": "tutu辣么可爱(greasyfork)/IcedWatermelonJuice(github)",
  15. 		"dependency": {
  16. 			"_cpr_version": (a, b) => {
  17. 				function toNum(a) {
  18. 					var a = a.toString();
  19. 					//也可以这样写 var c=a.split(/\./);
  20. 					var c = a.split('.');
  21. 					var num_place = ["", "0", "00", "000", "0000"],
  22. 						r = num_place.reverse();
  23. 					for (var i = 0; i < c.length; i++) {
  24. 						var len = c[i].length;
  25. 						c[i] = r[len] + c[i];
  26. 					}
  27. 					var res = c.join('');
  28. 					return res;
  29. 				}
  30. 				var _a = toNum(a),
  31. 					_b = toNum(b);
  32. 				if (_a == _b) return 0;
  33. 				if (_a > _b) return 1;
  34. 				if (_a < _b) return -1;
  35. 			},
  36. 			"jQuery": "3.4.1",
  37. 			"jQuery-Extensions-touchJS": "1.7"
  38. 		}
  39. 	};
  40. 	var cpr_version=aboutFreeDragJS.dependency["_cpr_version"];
  41. 	if (typeof $ !== "function" && typeof jQuery !== "function") {
  42. 		console.error(`${aboutFreeDragJS.name} 缺少jQuery依赖`)
  43. 		return false;
  44. 	}
  45. 	if (typeof $.fn.touch !== "function") {
  46. 		console.error(`${aboutFreeDragJS.name} 缺少jQuery-Extensions-touchJS依赖`)
  47. 		return false;
  48. 	}
  49. 	if (cpr_version(aboutFreeDragJS.dependency["jQuery"], $.fn.jquery) > 0) {
  50. 		console.error(
  51. 			`${aboutFreeDragJS.name}要求jQuery版本至少为${aboutFreeDragJS.dependency["jQuery"]}，当前为${$.fn.jquery}。请升级jQuery`
  52. 		)
  53. 		return false;
  54. 	}
  55. 	if (cpr_version(aboutFreeDragJS.dependency["jQuery-Extensions-touchJS"], $.fn.aboutTouch("version")) > 0) {
  56. 		console.error(
  57. 			`${aboutFreeDragJS.name}要求jQuery-Extensions-touchJS版本至少为${aboutFreeDragJS.dependency["jQuery-Extensions-touchJS"]}，当前为${$.fn.aboutTouch("version")}。请升级jQuery-Extensions-touchJS`
  58. 		)
  59. 		return false;
  60. 	}
  61. 	if ($.fn.jquery && $.fn.touch)
  62. 		$.fn.freeDrag = function(container = $("body"), params = {}) {
  63. 			container = $(container);
  64. 			var target = this,
  65. 				fn0 = typeof params.start === "function" ? params.start : () => {},
  66. 				fn1 = typeof params.move === "function" ? params.move : () => {},
  67. 				fn2 = typeof params.end === "function" ? params.end : () => {}
  68. 			if (!/relative|absolute/i.test(container.css("position"))) {
  69. 				container.css("position", "relative");
  70. 			}
  71. 			var enable = false,
  72. 				pos = {};
  73.  
  74. 			target.touch({
  75. 				start: (e) => {
  76. 					enable = true;
  77. 					pos = {
  78. 						x: e[0].x,
  79. 						y: e[0].y
  80. 					}
  81. 					fn0({
  82. 						state: "start",
  83. 						container: container,
  84. 						target: target,
  85. 						original: pos
  86. 					})
  87. 				},
  88. 				end: (e) => {
  89. 					enable = false;
  90. 					fn2({
  91. 						state: "end",
  92. 						container: container,
  93. 						target: target,
  94. 						original: pos
  95. 					})
  96. 					pos = {};
  97. 				}
  98. 			})
  99. 			container.touch("swipe", (e) => {
  100. 				var $e = target;
  101. 				if (!enable) return false
  102. 				var newPos = {
  103. 						x: e[1].x,
  104. 						y: e[1].y
  105. 					},
  106. 					realPos = {
  107. 						x: $e.position().left + newPos.x - pos.x,
  108. 						y: $e.position().top + newPos.y - pos.y
  109. 					};
  110. 				fn1({
  111. 					state: "move",
  112. 					container: container,
  113. 					target: target,
  114. 					original: pos,
  115. 					new: newPos,
  116. 					real: realPos
  117. 				});
  118. 				$e.css({
  119. 					"top": `${realPos.y}px`,
  120. 					"left": `${realPos.x}px`,
  121. 				})
  122. 				pos = newPos;
  123. 			})
  124. 			container.has(target) || container.append(target);
  125. 		}
  126. 	$.fn.aboutFreeDrag = (query) => {
  127. 		return aboutFreeDragJS[query] ? aboutFreeDragJS[query] : aboutFreeDragJS
  128. 	}
  129. })(jQuery);