advanced code snippet search

Posted By

jatkins on 08/20/10


Tagged

css html DOM drop drag


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

wirenaught


Drag-and-drop library

 / Published in: JavaScript
 

License: public domain (retention of authorship message in code is appreciated). Size: 3.94 kB. To enable drag-drop capability on one or more elements, use enableDragDrop(elementIDArray, dropLocation);, where elementIDArray is an array of the IDs of elements to be given drag-drop capability, and dropLocation is an optional parameter which will return the dragged elements to their original position if they are dropped outside of the perimeter of the element with the ID dropLocation. To disable drag-drop capability on one or more elements, use disableDragDrop(elementIDArray);.

Expand | Embed | Plain Text 
  1. /*
  2.  * Created August 19, 2010; updated February 26, 2011
  3.  * Released into the public domain by Josh Atkins
  4. */
  5.  
  6. var dragEnabled, curDragElmnt, curDropLoc, curCursorX, curCursorY, cursorX, cursorY, positionStyles;
  7.  
  8. function get(elmnt) {
  9. 	return document.getElementById(elmnt);
  10. }
  11.  
  12. function beginDrag(dragElmnt, dropLocation, dragEvent) {
  13. 	if(curDragElmnt) get(curDragElmnt).style.zIndex = '1';
  14. 	curDragElmnt = dragElmnt;
  15. 	dragEnabled = 1;
  16. 	get(curDragElmnt).style.zIndex = '2';
  17. 	if(dropLocation&&dropLocation!='') curDropLoc = dropLocation;
  18. 	updateCursorPos(dragEvent);
  19. 	return false;
  20. }
  21.  
  22. function updateCursorPos(moveEvent) {
  23. 	curCursorX = moveEvent.clientX + document.body.scrollLeft - document.body.clientLeft;
  24. 	curCursorY = moveEvent.clientY + document.body.scrollTop - document.body.clientTop;
  25. }
  26.  
  27. function drag(dragEvent) {
  28. 	cursorX = dragEvent.clientX + document.body.scrollLeft - document.body.clientLeft;
  29. 	cursorY = dragEvent.clientY + document.body.scrollTop - document.body.clientTop;
  30. 	if(dragEnabled==1) {
  31. 		get(curDragElmnt).style.left = get(curDragElmnt).offsetLeft + cursorX - curCursorX + 'px';
  32. 		get(curDragElmnt).style.top = get(curDragElmnt).offsetTop + cursorY - curCursorY + 'px';
  33. 	}
  34. 	updateCursorPos(dragEvent);
  35. }
  36.  
  37. function stopDrag() {
  38. 	if(dragEnabled==1) {
  39. 		curCursorX = null;
  40. 		curCursorY = null;
  41. 		if(curDropLoc&&!checkIfElmntInsideAnother(curDragElmnt, curDropLoc)) {
  42. 			positionStyles = get(curDragElmnt).className.substring(get(curDragElmnt).className.indexOf('posStart')+8,
  43. 							 get(curDragElmnt).className.indexOf('posEnd')+6).split('px');
  44. 			get(curDragElmnt).style.left = positionStyles[0] + 'px';
  45. 			get(curDragElmnt).style.top = positionStyles[1] + 'px';
  46. 		}
  47. 		curDropLoc = null;
  48. 		dragEnabled = 0;
  49. 	}
  50. }
  51.  
  52. function trimSpaces(value) {
  53. 	value = value.substring(0, 1) == ' ' ? value.substring(1) : value;
  54. 	return value.substring(value.length-1) == ' ' ? value.substring(0, value.length-1) : value;
  55. }
  56.  
  57. function enableDragDrop(dragObjs, dropLocation) {
  58. 	if(document.body.className.indexOf('dragDropEnabled')==-1) {
  59. 		document.body.className = trimSpaces(document.body.className + ' dragDropEnabled');
  60. 		document.body.setAttribute('onmousemove', trimSpaces((document.body.getAttribute('onmousemove')||'') + ' drag(event);'));
  61. 		document.body.setAttribute('onmouseup', trimSpaces((document.body.getAttribute('onmouseup')||'') + ' stopDrag();'));
  62. 	}
  63. 	for(var i=0;i<dragObjs.length;i++) {
  64. 		if(get(dragObjs[i]).className.indexOf('dragDropEnabled')==-1) {
  65. 			get(dragObjs[i]).setAttribute('onmousedown', trimSpaces((get(dragObjs[i]).getAttribute('onmousedown')||'') +
  66. 			' return beginDrag(this.id, '+(dropLocation!=null&&dropLocation!=''?'\''+dropLocation+'\'':'null')+', event);'));
  67. 			get(dragObjs[i]).className = trimSpaces(get(dragObjs[i]).className+' posStart'+get(dragObjs[i]).offsetLeft+'px'+get(dragObjs[i]).offsetTop+'pxposEnd dragDropEnabled');
  68. 			if(!get(dragObjs[i]).style.width) get(dragObjs[i]).style.width = get(dragObjs[i]).offsetWidth + 'px';
  69. 			get(dragObjs[i]).style.left = get(dragObjs[i]).offsetLeft + 'px';
  70. 			get(dragObjs[i]).style.top = get(dragObjs[i]).offsetTop + 'px';
  71. 		}
  72. 	}
  73. 	for(i=0;i<dragObjs.length;i++) {
  74. 		if(get(dragObjs[i]).style.position!='absolute') get(dragObjs[i]).style.position = 'absolute';
  75. 	}
  76. }
  77.  
  78. function disableDragDrop(dragObjs) {
  79. 	for(var i=0;i<dragObjs.length;i++) {
  80. 		get(dragObjs[i]).setAttribute('onmousedown', trimSpaces(get(dragObjs[i]).getAttribute('onmousedown').replace(/return beginDrag([^\)]+)\);/, '')));
  81. 		get(dragObjs[i]).className = trimSpaces(get(dragObjs[i]).className.replace(/dragDropEnabled/, ''));
  82. 	}
  83. }
  84.  
  85. function checkIfElmntInsideAnother(first, second) {
  86. 	return get(first).offsetTop+get(first).offsetHeight<=get(second).offsetTop+get(second).offsetHeight&&
  87. 		   get(first).offsetLeft+get(first).offsetWidth<=get(second).offsetLeft+get(second).offsetWidth&&
  88. 		   get(first).offsetTop>=get(second).offsetTop&&get(first).offsetLeft>=get(second).offsetLeft;
  89. }

Report this snippet  

You need to login to post a comment.