idrag.js
上传用户:shjgzm
上传日期:2017-08-31
资源大小:2757k
文件大小:16k
源码类别:

Ajax

开发平台:

Java

  1. /**
  2.  * Interface Elements for jQuery
  3.  * Draggable
  4.  * 
  5.  * http://interface.eyecon.ro
  6.  * 
  7.  * Copyright (c) 2006 Stefan Petre
  8.  * Dual licensed under the MIT (MIT-LICENSE.txt) 
  9.  * and GPL (GPL-LICENSE.txt) licenses.
  10.  *   
  11.  *
  12.  */
  13. jQuery.iDrag = {
  14. helper : null,
  15. dragged: null,
  16. destroy : function()
  17. {
  18. return this.each(
  19. function ()
  20. {
  21. if (this.isDraggable) {
  22. this.dragElem = null;
  23. jQuery(this).unbind('mousedown', jQuery.iDrag.dragstart);
  24. }
  25. }
  26. );
  27. },
  28. draginit : function (e)
  29. {
  30. if (jQuery.iDrag.dragged != null) {
  31. jQuery.iDrag.dragstop(e);
  32. return false;
  33. }
  34. var elm = this.dragElem;
  35. jQuery(document)
  36. .bind('mousemove', jQuery.iDrag.dragmove)
  37. .bind('mouseup', jQuery.iDrag.dragstop);
  38. elm.dragCfg.pointer = jQuery.iUtil.getPointer(e);
  39. elm.dragCfg.currentPointer = elm.dragCfg.pointer;
  40. elm.dragCfg.init = false;
  41. elm.dragCfg.fromHandler = this != this.dragElem;
  42. jQuery.iDrag.dragged = elm;
  43. if (elm.dragCfg.si && this != this.dragElem) {
  44. parentPos = jQuery.iUtil.getPosition(elm.parentNode);
  45. sliderSize = jQuery.iUtil.getSize(elm);
  46. sliderPos = {
  47. x : parseInt(jQuery.css(elm,'left')) || 0,
  48. y : parseInt(jQuery.css(elm,'top')) || 0
  49. };
  50. dx = elm.dragCfg.currentPointer.x - parentPos.x - sliderSize.wb/2 - sliderPos.x;
  51. dy = elm.dragCfg.currentPointer.y - parentPos.y - sliderSize.hb/2 - sliderPos.y;
  52. jQuery.iSlider.dragmoveBy(elm, [dx, dy]);
  53. }
  54. return false;
  55. },
  56. dragstart : function(e)
  57. {
  58. elm = jQuery.iDrag.dragged;
  59. elm.dragCfg.init = true;
  60. dEs = elm.style;
  61. elm.dragCfg.oD = jQuery.css(elm,'display');
  62. elm.dragCfg.oP = jQuery.css(elm,'position');
  63. if (!elm.dragCfg.initialPosition)
  64. elm.dragCfg.initialPosition = elm.dragCfg.oP;
  65. elm.dragCfg.oR = {
  66. x : parseInt(jQuery.css(elm,'left')) || 0,
  67. y : parseInt(jQuery.css(elm,'top')) || 0
  68. };
  69. elm.dragCfg.diffX = 0;
  70. elm.dragCfg.diffY = 0;
  71. if (jQuery.browser.msie) {
  72. oldBorder = jQuery.iUtil.getBorder(elm, true);
  73. elm.dragCfg.diffX = oldBorder.l||0;
  74. elm.dragCfg.diffY = oldBorder.t||0;
  75. }
  76. elm.dragCfg.oC = jQuery.extend(
  77. jQuery.iUtil.getPosition(elm),
  78. jQuery.iUtil.getSize(elm)
  79. );
  80. if (elm.dragCfg.oP != 'relative' && elm.dragCfg.oP != 'absolute') {
  81. dEs.position = 'relative';
  82. }
  83. jQuery.iDrag.helper.empty();
  84. clonedEl = elm.cloneNode(true);
  85. jQuery(clonedEl).css(
  86. {
  87. display: 'block',
  88. left: '0px',
  89. top:  '0px'
  90. }
  91. );
  92. clonedEl.style.marginTop = '0';
  93. clonedEl.style.marginRight = '0';
  94. clonedEl.style.marginBottom = '0';
  95. clonedEl.style.marginLeft = '0';
  96. jQuery.iDrag.helper.append(clonedEl);
  97. if (elm.dragCfg.onStart)
  98. elm.dragCfg.onStart.apply(elm, [clonedEl]);
  99. dhs = jQuery.iDrag.helper.get(0).style;
  100. if (elm.dragCfg.autoSize) {
  101. dhs.width = 'auto';
  102. dhs.height = 'auto';
  103. } else {
  104. dhs.height = elm.dragCfg.oC.hb + 'px';
  105. dhs.width = elm.dragCfg.oC.wb + 'px';
  106. }
  107. dhs.display = 'block';
  108. dhs.marginTop = '0px';
  109. dhs.marginRight = '0px';
  110. dhs.marginBottom = '0px';
  111. dhs.marginLeft = '0px';
  112. //remeasure the clone to check if the size was changed by user's functions
  113. jQuery.extend(
  114. elm.dragCfg.oC,
  115. jQuery.iUtil.getSize(clonedEl)
  116. );
  117. if (elm.dragCfg.cursorAt) {
  118. if (elm.dragCfg.cursorAt.left) {
  119. elm.dragCfg.oR.x += elm.dragCfg.pointer.x - elm.dragCfg.oC.x - elm.dragCfg.cursorAt.left;
  120. elm.dragCfg.oC.x = elm.dragCfg.pointer.x - elm.dragCfg.cursorAt.left;
  121. }
  122. if (elm.dragCfg.cursorAt.top) {
  123. elm.dragCfg.oR.y += elm.dragCfg.pointer.y - elm.dragCfg.oC.y - elm.dragCfg.cursorAt.top;
  124. elm.dragCfg.oC.y = elm.dragCfg.pointer.y - elm.dragCfg.cursorAt.top;
  125. }
  126. if (elm.dragCfg.cursorAt.right) {
  127. elm.dragCfg.oR.x += elm.dragCfg.pointer.x - elm.dragCfg.oC.x -elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.right;
  128. elm.dragCfg.oC.x = elm.dragCfg.pointer.x - elm.dragCfg.oC.wb + elm.dragCfg.cursorAt.right;
  129. }
  130. if (elm.dragCfg.cursorAt.bottom) {
  131. elm.dragCfg.oR.y += elm.dragCfg.pointer.y - elm.dragCfg.oC.y - elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.bottom;
  132. elm.dragCfg.oC.y = elm.dragCfg.pointer.y - elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.bottom;
  133. }
  134. }
  135. elm.dragCfg.nx = elm.dragCfg.oR.x;
  136. elm.dragCfg.ny = elm.dragCfg.oR.y;
  137. if (elm.dragCfg.insideParent || elm.dragCfg.containment == 'parent') {
  138. parentBorders = jQuery.iUtil.getBorder(elm.parentNode, true);
  139. elm.dragCfg.oC.x = elm.offsetLeft + (jQuery.browser.msie ? 0 : jQuery.browser.opera ? -parentBorders.l : parentBorders.l);
  140. elm.dragCfg.oC.y = elm.offsetTop + (jQuery.browser.msie ? 0 : jQuery.browser.opera ? -parentBorders.t : parentBorders.t);
  141. jQuery(elm.parentNode).append(jQuery.iDrag.helper.get(0));
  142. }
  143. if (elm.dragCfg.containment) {
  144. jQuery.iDrag.getContainment(elm);
  145. elm.dragCfg.onDrag.containment = jQuery.iDrag.fitToContainer;
  146. }
  147. if (elm.dragCfg.si) {
  148. jQuery.iSlider.modifyContainer(elm);
  149. }
  150. dhs.left = elm.dragCfg.oC.x - elm.dragCfg.diffX + 'px';
  151. dhs.top = elm.dragCfg.oC.y - elm.dragCfg.diffY + 'px';
  152. //resize the helper to fit the clone
  153. dhs.width = elm.dragCfg.oC.wb + 'px';
  154. dhs.height = elm.dragCfg.oC.hb + 'px';
  155. jQuery.iDrag.dragged.dragCfg.prot = false;
  156. if (elm.dragCfg.gx) {
  157. elm.dragCfg.onDrag.grid = jQuery.iDrag.snapToGrid;
  158. }
  159. if (elm.dragCfg.zIndex != false) {
  160. jQuery.iDrag.helper.css('zIndex', elm.dragCfg.zIndex);
  161. }
  162. if (elm.dragCfg.opacity) {
  163. jQuery.iDrag.helper.css('opacity', elm.dragCfg.opacity);
  164. if (window.ActiveXObject) {
  165. jQuery.iDrag.helper.css('filter', 'alpha(opacity=' + elm.dragCfg.opacity * 100 + ')');
  166. }
  167. }
  168. if (elm.dragCfg.ghosting == false) {
  169. dEs.display = 'none';
  170. }
  171. if (jQuery.iDrop && jQuery.iDrop.count > 0 ){
  172. jQuery.iDrop.highlight(elm);
  173. }
  174. return false;
  175. },
  176. getContainment : function(elm)
  177. {
  178. if (elm.dragCfg.containment.constructor == String) {
  179. if (elm.dragCfg.containment == 'parent') {
  180. elm.dragCfg.cont = jQuery.extend(
  181. {x:0,y:0},
  182. jQuery.iUtil.getSize(elm.parentNode)
  183. );
  184. contBorders = jQuery.iUtil.getBorder(elm.parentNode, true);
  185. elm.dragCfg.cont.w = elm.dragCfg.cont.wb - contBorders.l - contBorders.r;
  186. elm.dragCfg.cont.h = elm.dragCfg.cont.hb - contBorders.t - contBorders.b;
  187. } else if (elm.dragCfg.containment == 'document') {
  188. clnt = jQuery.iUtil.getClient();
  189. elm.dragCfg.cont = {
  190. x : 0,
  191. y : 0,
  192. w : clnt.w,
  193. h : clnt.h
  194. };
  195. }
  196. } else if (elm.dragCfg.containment.constructor == Array) {
  197. elm.dragCfg.cont = {
  198. x : parseInt(elm.dragCfg.containment[0])||0,
  199. y : parseInt(elm.dragCfg.containment[1])||0,
  200. w : parseInt(elm.dragCfg.containment[2])||0,
  201. h : parseInt(elm.dragCfg.containment[3])||0
  202. };
  203. }
  204. elm.dragCfg.cont.dx = elm.dragCfg.cont.x - elm.dragCfg.oC.x;
  205. elm.dragCfg.cont.dy = elm.dragCfg.cont.y - elm.dragCfg.oC.y;
  206. },
  207. hidehelper : function(dragged)
  208. {
  209. if (dragged.dragCfg.insideParent || dragged.dragCfg.containment == 'parent') {
  210. jQuery('body', document).append(jQuery.iDrag.helper.get(0));
  211. }
  212. jQuery.iDrag.helper.empty().hide().css('opacity', 1);
  213. if (window.ActiveXObject) {
  214. jQuery.iDrag.helper.css('filter', 'alpha(opacity=100)');
  215. }
  216. },
  217. dragstop : function(e)
  218. {
  219. jQuery(document)
  220. .unbind('mousemove', jQuery.iDrag.dragmove)
  221. .unbind('mouseup', jQuery.iDrag.dragstop);
  222. if (jQuery.iDrag.dragged == null) {
  223. return;
  224. }
  225. dragged = jQuery.iDrag.dragged;
  226. jQuery.iDrag.dragged = null;
  227. if (dragged.dragCfg.init == false) {
  228. return false;
  229. }
  230. if (dragged.dragCfg.so == true) {
  231. jQuery(dragged).css('position', dragged.dragCfg.oP);
  232. }
  233. dEs = dragged.style;
  234. if (dragged.si) {
  235. jQuery.iDrag.helper.css('cursor', 'move');
  236. }
  237. if (dragged.dragCfg.revert == false) {
  238. if (dragged.dragCfg.fx > 0) {
  239. if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally') {
  240. x = new jQuery.fx(dragged,dragged.dragCfg.fx, 'left');
  241. x.custom(dragged.dragCfg.oR.x,dragged.dragCfg.nRx);
  242. }
  243. if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically') {
  244. y = new jQuery.fx(dragged,dragged.dragCfg.fx, 'top');
  245. y.custom(dragged.dragCfg.oR.y,dragged.dragCfg.nRy);
  246. }
  247. } else {
  248. if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally') 
  249. dragged.style.left = dragged.dragCfg.nRx + 'px';
  250. if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically')
  251. dragged.style.top = dragged.dragCfg.nRy + 'px';
  252. }
  253. jQuery.iDrag.hidehelper(dragged);
  254. if (dragged.dragCfg.ghosting == false) {
  255. jQuery(dragged).css('display', dragged.dragCfg.oD);
  256. }
  257. } else if (dragged.dragCfg.fx > 0) {
  258. dragged.dragCfg.prot = true;
  259. if(jQuery.iDrop && jQuery.iDrop.overzone && jQuery.iSort) {
  260. dh = jQuery.iUtil.getPosition(jQuery.iSort.helper.get(0));
  261. } else {
  262. dh = false;
  263. }
  264. jQuery.iDrag.helper.animate(
  265. {
  266. left : dh ? dh.x : dragged.dragCfg.oC.x,
  267. top : dh ? dh.y : dragged.dragCfg.oC.y
  268. },
  269. dragged.dragCfg.fx,
  270. function()
  271. {
  272. dragged.dragCfg.prot = false;
  273. if (dragged.dragCfg.ghosting == false) {
  274. dragged.style.display = dragged.dragCfg.oD;
  275. }
  276. jQuery.iDrag.hidehelper(dragged);
  277. }
  278. );
  279. } else {
  280. jQuery.iDrag.hidehelper(dragged);
  281. if (dragged.dragCfg.ghosting == false) {
  282. jQuery(dragged).css('display', dragged.dragCfg.oD);
  283. }
  284. }
  285. if (jQuery.iDrop && jQuery.iDrop.count > 0 ){
  286. jQuery.iDrop.checkdrop(dragged);
  287. }
  288. if (jQuery.iSort && jQuery.iDrop.overzone) {
  289. jQuery.iSort.check(dragged);
  290. }
  291. if (dragged.dragCfg.onChange && (dragged.dragCfg.nRx != dragged.dragCfg.oR.x || dragged.dragCfg.nRy != dragged.dragCfg.oR.y)){
  292. dragged.dragCfg.onChange.apply(dragged, dragged.dragCfg.lastSi||[0,0,dragged.dragCfg.nRx,dragged.dragCfg.nRy]);
  293. }
  294. if (dragged.dragCfg.onStop)
  295. dragged.dragCfg.onStop.apply(dragged);
  296. return false;
  297. },
  298. snapToGrid : function(x, y, dx, dy)
  299. {
  300. if (dx != 0)
  301. dx = parseInt((dx + (this.dragCfg.gx * dx/Math.abs(dx))/2)/this.dragCfg.gx) * this.dragCfg.gx;
  302. if (dy != 0)
  303. dy = parseInt((dy + (this.dragCfg.gy * dy/Math.abs(dy))/2)/this.dragCfg.gy) * this.dragCfg.gy;
  304. return {
  305. dx : dx,
  306. dy : dy,
  307. x: 0,
  308. y: 0
  309. };
  310. },
  311. fitToContainer : function(x, y, dx, dy)
  312. {
  313. dx = Math.min(
  314. Math.max(dx,this.dragCfg.cont.dx),
  315. this.dragCfg.cont.w + this.dragCfg.cont.dx - this.dragCfg.oC.wb
  316. );
  317. dy = Math.min(
  318. Math.max(dy,this.dragCfg.cont.dy),
  319. this.dragCfg.cont.h + this.dragCfg.cont.dy - this.dragCfg.oC.hb
  320. );
  321. return {
  322. dx : dx,
  323. dy : dy,
  324. x: 0,
  325. y: 0
  326. }
  327. },
  328. dragmove : function(e)
  329. {
  330. if (jQuery.iDrag.dragged == null || jQuery.iDrag.dragged.dragCfg.prot == true) {
  331. return;
  332. }
  333. var dragged = jQuery.iDrag.dragged;
  334. dragged.dragCfg.currentPointer = jQuery.iUtil.getPointer(e);
  335. if (dragged.dragCfg.init == false) {
  336. distance = Math.sqrt(Math.pow(dragged.dragCfg.pointer.x - dragged.dragCfg.currentPointer.x, 2) + Math.pow(dragged.dragCfg.pointer.y - dragged.dragCfg.currentPointer.y, 2));
  337. if (distance < dragged.dragCfg.snapDistance){
  338. return;
  339. } else {
  340. jQuery.iDrag.dragstart(e);
  341. }
  342. }
  343. dx = dragged.dragCfg.currentPointer.x - dragged.dragCfg.pointer.x;
  344. dy = dragged.dragCfg.currentPointer.y - dragged.dragCfg.pointer.y;
  345. for (i in dragged.dragCfg.onDrag) {
  346. newCoords = dragged.dragCfg.onDrag[i].apply(dragged, [dragged.dragCfg.oR.x + dx, dragged.dragCfg.oR.y + dy, dx, dy]);
  347. if (newCoords && newCoords.constructor == Object) {
  348. dx = i != 'user' ? newCoords.dx : (newCoords.x - dragged.dragCfg.oR.x);
  349. dy = i != 'user' ? newCoords.dy : (newCoords.y - dragged.dragCfg.oR.y);
  350. }
  351. }
  352. dragged.dragCfg.nx = dragged.dragCfg.oC.x + dx - dragged.dragCfg.diffX;
  353. dragged.dragCfg.ny = dragged.dragCfg.oC.y + dy - dragged.dragCfg.diffY;
  354. if (dragged.dragCfg.si && (dragged.dragCfg.onSlide || dragged.dragCfg.onChange)) {
  355. jQuery.iSlider.onSlide(dragged, dragged.dragCfg.nx, dragged.dragCfg.ny);
  356. }
  357. if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally') {
  358. dragged.dragCfg.nRx = dragged.dragCfg.oR.x + dx;
  359. jQuery.iDrag.helper.get(0).style.left = dragged.dragCfg.nx + 'px';
  360. }
  361. if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically') {
  362. dragged.dragCfg.nRy = dragged.dragCfg.oR.y + dy;
  363. jQuery.iDrag.helper.get(0).style.top = dragged.dragCfg.ny + 'px';
  364. }
  365. if (jQuery.iDrop && jQuery.iDrop.count > 0 ){
  366. jQuery.iDrop.checkhover(dragged, clonedEl);
  367. }
  368. return false;
  369. },
  370. build : function(o)
  371. {
  372. /*if (jQuery.browser.msie) {
  373. jQuery(window)
  374. .bind(
  375. 'unload', 
  376. function()
  377. {
  378. jQuery('body')
  379. .unbind('mousemove', jQuery.iDrag.dragmove)
  380. .unbind('mouseup', jQuery.iDrag.dragstop);
  381. jQuery.iDrag.helper = null;
  382. jQuery.iDrag.dragged = null;
  383. jQuery('*').each(
  384. function()
  385. {
  386. if (this.dragElem) {
  387. jQuery(this).unbind('mousedown', jQuery.iDrag.dragstart);
  388. this.dragElem = null;
  389. this.onselectstart = null;
  390. this.ondragstart = null;
  391. }
  392. }
  393. );
  394. }
  395. );
  396. }*/
  397. if (!jQuery.iDrag.helper) {
  398. jQuery('body',document).append('<div id="dragHelper"></div>');
  399. jQuery.iDrag.helper = jQuery('#dragHelper');
  400. el = jQuery.iDrag.helper.get(0);
  401. els = el.style;
  402. els.position = 'absolute';
  403. els.display = 'none';
  404. els.cursor = 'move';
  405. els.listStyle = 'none';
  406. els.overflow = 'hidden';
  407. if (window.ActiveXObject) {
  408. el.onselectstart = function(){return false;};
  409. el.ondragstart = function(){return false;};
  410. } else {
  411. els.mozUserSelect = 'none';
  412. els.userSelect = 'none';
  413. }
  414. }
  415. if (!o) {
  416. o = {};
  417. }
  418. return this.each(
  419. function()
  420. {
  421. if (this.isDraggable || !jQuery.iUtil)
  422. return;
  423. if (window.ActiveXObject) {
  424. this.onselectstart = function(){return false;};
  425. this.ondragstart = function(){return false;};
  426. }
  427. var dhe = o.handle ? jQuery(this).find(o.handle) : jQuery(this);
  428. this.dragCfg = {
  429. revert : o.revert ? true : false,
  430. ghosting : o.ghosting ? true : false,
  431. so : o.so ? o.so : false,
  432. si : o.si ? o.si : false,
  433. insideParent : o.insideParent ? o.insideParent : false,
  434. zIndex : o.zIndex ? parseInt(o.zIndex)||0 : false,
  435. opacity : o.opacity ? parseFloat(o.opacity) : false,
  436. fx : parseInt(o.fx)||null,
  437. hpc : o.hpc ? o.hpc : false,
  438. onDrag : {},
  439. pointer : {},
  440. onStart : o.onStart && o.onStart.constructor == Function ? o.onStart : false,
  441. onStop : o.onStop && o.onStop.constructor == Function ? o.onStop : false,
  442. onChange : o.onChange && o.onChange.constructor == Function ? o.onChange : false,
  443. axis : /vertically|horizontally/.test(o.axis) ? o.axis : false,
  444. snapDistance : o.snapDistance ? parseInt(o.snapDistance)||0 : 0,
  445. cursorAt: o.cursorAt ? o.cursorAt : false,
  446. autoSize : o.autoSize ? true : false
  447. };
  448. if (o.onDrag && o.onDrag.constructor == Function)
  449. this.dragCfg.onDrag.user = o.onDrag;
  450. if (o.containment && ((o.containment.constructor == String && (o.containment == 'parent' || o.containment == 'document')) || (o.containment.constructor == Array && o.containment.length == 4) )) {
  451. this.dragCfg.containment = o.containment;
  452. }
  453. if(o.fractions) {
  454. this.dragCfg.fractions = o.fractions;
  455. }
  456. if(o.grid){
  457. if(typeof o.grid == 'number'){
  458. this.dragCfg.gx = parseInt(o.grid)||1;
  459. this.dragCfg.gy = parseInt(o.grid)||1;
  460. } else if (o.grid.length == 2) {
  461. this.dragCfg.gx = parseInt(o.grid[0])||1;
  462. this.dragCfg.gy = parseInt(o.grid[1])||1;
  463. }
  464. }
  465. if (o.onSlide && o.onSlide.constructor == Function) {
  466. this.dragCfg.onSlide = o.onSlide;
  467. }
  468. this.isDraggable = true;
  469. dhe.get(0).dragElem = this;
  470. dhe.bind('mousedown', jQuery.iDrag.draginit);
  471. }
  472. )
  473. }
  474. };
  475. jQuery.fn.extend(
  476. {
  477. DraggableDestroy : jQuery.iDrag.destroy,
  478. Draggable : jQuery.iDrag.build
  479. }
  480. );