UU跑腿标准版

ligerDrag.js 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. /**
  2. * jQuery ligerUI 1.2.1
  3. *
  4. * http://ligerui.com
  5. *
  6. * Author daomi 2013 [ gd_star@163.com ]
  7. *
  8. */
  9. (function ($)
  10. {
  11. var l = $.ligerui;
  12. $.fn.ligerDrag = function (options)
  13. {
  14. return l.run.call(this, "ligerDrag", arguments,
  15. {
  16. idAttrName: 'ligeruidragid', hasElement: false, propertyToElemnt: 'target'
  17. }
  18. );
  19. };
  20. $.fn.ligerGetDragManager = function ()
  21. {
  22. return l.run.call(this, "ligerGetDragManager", arguments,
  23. {
  24. idAttrName: 'ligeruidragid', hasElement: false, propertyToElemnt: 'target'
  25. });
  26. };
  27. $.ligerDefaults.Drag = {
  28. onStartDrag: false,
  29. onDrag: false,
  30. onStopDrag: false,
  31. handler: null,
  32. //代理 拖动时的主体,可以是'clone'或者是函数,放回jQuery 对象
  33. proxy: true,
  34. revert: false,
  35. animate: true,
  36. onRevert: null,
  37. onEndRevert: null,
  38. //接收区域 jQuery对象或者jQuery选择字符
  39. receive: null,
  40. //进入区域
  41. onDragEnter: null,
  42. //在区域移动
  43. onDragOver: null,
  44. //离开区域
  45. onDragLeave: null,
  46. //在区域释放
  47. onDrop: null,
  48. disabled: false,
  49. proxyX: null, //代理相对鼠标指针的位置,如果不设置则对应target的left
  50. proxyY: null
  51. };
  52. l.controls.Drag = function (options)
  53. {
  54. l.controls.Drag.base.constructor.call(this, null, options);
  55. };
  56. l.controls.Drag.ligerExtend(l.core.UIComponent, {
  57. __getType: function ()
  58. {
  59. return 'Drag';
  60. },
  61. __idPrev: function ()
  62. {
  63. return 'Drag';
  64. },
  65. _render: function ()
  66. {
  67. var g = this, p = this.options;
  68. this.set(p);
  69. g.cursor = "move";
  70. g.handler.css('cursor', g.cursor);
  71. g.handler.bind('mousedown.drag', function (e)
  72. {
  73. if (p.disabled) return;
  74. if (e.button == 2) return;
  75. g._start.call(g, e);
  76. }).bind('mousemove.drag', function ()
  77. {
  78. if (p.disabled) return;
  79. g.handler.css('cursor', g.cursor);
  80. });
  81. },
  82. _rendered: function ()
  83. {
  84. this.options.target.ligeruidragid = this.id;
  85. },
  86. _start: function (e)
  87. {
  88. var g = this, p = this.options;
  89. if (g.reverting) return;
  90. if (p.disabled) return;
  91. g.current = {
  92. target: g.target,
  93. left: g.target.offset().left,
  94. top: g.target.offset().top,
  95. startX: e.pageX || e.screenX,
  96. startY: e.pageY || e.clientY
  97. };
  98. if (g.trigger('startDrag', [g.current, e]) == false) return false;
  99. g.cursor = "move";
  100. g._createProxy(p.proxy, e);
  101. //代理没有创建成功
  102. if (p.proxy && !g.proxy) return false;
  103. (g.proxy || g.handler).css('cursor', g.cursor);
  104. $(document).bind("selectstart.drag", function () { return false; });
  105. $(document).bind('mousemove.drag', function ()
  106. {
  107. g._drag.apply(g, arguments);
  108. });
  109. l.draggable.dragging = true;
  110. $(document).bind('mouseup.drag', function ()
  111. {
  112. l.draggable.dragging = false;
  113. g._stop.apply(g, arguments);
  114. });
  115. },
  116. _drag: function (e)
  117. {
  118. var g = this, p = this.options;
  119. if (!g.current) return;
  120. var pageX = e.pageX || e.screenX;
  121. var pageY = e.pageY || e.screenY;
  122. g.current.diffX = pageX - g.current.startX;
  123. g.current.diffY = pageY - g.current.startY;
  124. (g.proxy || g.handler).css('cursor', g.cursor);
  125. if (g.receive)
  126. {
  127. g.receive.each(function (i, obj)
  128. {
  129. var receive = $(obj);
  130. var xy = receive.offset();
  131. if (pageX > xy.left && pageX < xy.left + receive.width()
  132. && pageY > xy.top && pageY < xy.top + receive.height())
  133. {
  134. if (!g.receiveEntered[i])
  135. {
  136. g.receiveEntered[i] = true;
  137. g.trigger('dragEnter', [obj, g.proxy || g.target, e]);
  138. }
  139. else
  140. {
  141. g.trigger('dragOver', [obj, g.proxy || g.target, e]);
  142. }
  143. }
  144. else if (g.receiveEntered[i])
  145. {
  146. g.receiveEntered[i] = false;
  147. g.trigger('dragLeave', [obj, g.proxy || g.target, e]);
  148. }
  149. });
  150. }
  151. if (g.hasBind('drag'))
  152. {
  153. if (g.trigger('drag', [g.current, e]) != false)
  154. {
  155. g._applyDrag();
  156. }
  157. else
  158. {
  159. if (g.proxy)
  160. {
  161. g._removeProxy();
  162. } else
  163. {
  164. g._stop();
  165. }
  166. }
  167. }
  168. else
  169. {
  170. g._applyDrag();
  171. }
  172. },
  173. _stop: function (e)
  174. {
  175. var g = this, p = this.options;
  176. $(document).unbind('mousemove.drag');
  177. $(document).unbind('mouseup.drag');
  178. $(document).unbind("selectstart.drag");
  179. if (g.receive)
  180. {
  181. g.receive.each(function (i, obj)
  182. {
  183. if (g.receiveEntered[i])
  184. {
  185. g.trigger('drop', [obj, g.proxy || g.target, e]);
  186. }
  187. });
  188. }
  189. if (g.proxy)
  190. {
  191. if (p.revert)
  192. {
  193. if (g.hasBind('revert'))
  194. {
  195. if (g.trigger('revert', [g.current, e]) != false)
  196. g._revert(e);
  197. else
  198. g._removeProxy();
  199. }
  200. else
  201. {
  202. g._revert(e);
  203. }
  204. }
  205. else
  206. {
  207. g._applyDrag(g.target);
  208. g._removeProxy();
  209. }
  210. }
  211. g.cursor = 'move';
  212. g.trigger('stopDrag', [g.current, e]);
  213. g.current = null;
  214. g.handler.css('cursor', g.cursor);
  215. },
  216. _revert: function (e)
  217. {
  218. var g = this;
  219. g.reverting = true;
  220. g.proxy.animate({
  221. left: g.current.left,
  222. top: g.current.top
  223. }, function ()
  224. {
  225. g.reverting = false;
  226. g._removeProxy();
  227. g.trigger('endRevert', [g.current, e]);
  228. g.current = null;
  229. });
  230. },
  231. _applyDrag: function (applyResultBody)
  232. {
  233. var g = this, p = this.options;
  234. applyResultBody = applyResultBody || g.proxy || g.target;
  235. var cur = {}, changed = false;
  236. var noproxy = applyResultBody == g.target;
  237. if (g.current.diffX)
  238. {
  239. if (noproxy || p.proxyX == null)
  240. cur.left = g.current.left + g.current.diffX;
  241. else
  242. cur.left = g.current.startX + p.proxyX + g.current.diffX;
  243. changed = true;
  244. }
  245. if (g.current.diffY)
  246. {
  247. if (noproxy || p.proxyY == null)
  248. cur.top = g.current.top + g.current.diffY;
  249. else
  250. cur.top = g.current.startY + p.proxyY + g.current.diffY;
  251. changed = true;
  252. }
  253. if (applyResultBody == g.target && g.proxy && p.animate)
  254. {
  255. g.reverting = true;
  256. applyResultBody.animate(cur, function ()
  257. {
  258. g.reverting = false;
  259. });
  260. }
  261. else
  262. {
  263. applyResultBody.css(cur);
  264. }
  265. },
  266. _setReceive: function (receive)
  267. {
  268. this.receiveEntered = {};
  269. if (!receive) return;
  270. if (typeof receive == 'string')
  271. this.receive = $(receive);
  272. else
  273. this.receive = receive;
  274. },
  275. _setHandler: function (handler)
  276. {
  277. var g = this, p = this.options;
  278. if (!handler)
  279. g.handler = $(p.target);
  280. else
  281. g.handler = (typeof handler == 'string' ? $(handler, p.target) : handler);
  282. },
  283. _setTarget: function (target)
  284. {
  285. this.target = $(target);
  286. },
  287. _setCursor: function (cursor)
  288. {
  289. this.cursor = cursor;
  290. (this.proxy || this.handler).css('cursor', cursor);
  291. },
  292. _createProxy: function (proxy, e)
  293. {
  294. if (!proxy) return;
  295. var g = this, p = this.options;
  296. if (typeof proxy == 'function')
  297. {
  298. g.proxy = proxy.call(this.options.target, g, e);
  299. }
  300. else if (proxy == 'clone')
  301. {
  302. g.proxy = g.target.clone().css('position', 'absolute');
  303. g.proxy.appendTo('body');
  304. }
  305. else
  306. {
  307. g.proxy = $("<div class='l-draggable'></div>");
  308. g.proxy.width(g.target.width()).height(g.target.height())
  309. g.proxy.attr("dragid", g.id).appendTo('body');
  310. }
  311. g.proxy.css({
  312. left: p.proxyX == null ? g.current.left : g.current.startX + p.proxyX,
  313. top: p.proxyY == null ? g.current.top : g.current.startY + p.proxyY
  314. }).show();
  315. },
  316. _removeProxy: function ()
  317. {
  318. var g = this;
  319. if (g.proxy)
  320. {
  321. g.proxy.remove();
  322. g.proxy = null;
  323. }
  324. }
  325. });
  326. })(jQuery);