1 window.addEventListener("load", function(event) {

2 var originalElement;

3 var draggedElement;

4 var mouseX;

5 var mouseY;

6 var mouseOffsetX;

7 var mouseOffsetY;

8 var elementOffsetX;

9 var elementOffsetY;

10 var dropFunc;

11 var dragElement = function(element, func) {

12 //if (typeof(element) == "string") element = document.getElementById(element);

13 originalElement = element;

14 draggedElement = originalElement.cloneNode(true);

15 originalElement.style.visibility = "hidden";

16 draggedElement.style.margin = 0;

17 draggedElement.style.position = "absolute";

18 draggedElement.style.left = elementOffsetX = originalElement.offsetLeft;

19 draggedElement.style.top = elementOffsetY = originalElement.offsetTop;

20 draggedElement.style.width = originalElement.clientWidth;

21 draggedElement.style.height = originalElement.clientHeight;

22 draggedElement.style.backgroundColor = "#eee";

23 draggedElement.style.opacity = 0.8;

24 originalElement.offsetParent.appendChild(draggedElement);

25 // workaround for wrong clientWidth and clientHeight information:

26 draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth;

27 draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight;

28 mouseOffsetX = mouseX;

29 mouseOffsetY = mouseY;

30 dropFunc = func;

31 };

32 window.addEventListener("mousemove", function(event) {

33 mouseX = event.pageX;

34 mouseY = event.pageY;

35 if (draggedElement) {

36 draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX;

37 draggedElement.style.top = elementOffsetY + mouseY - mouseOffsetY;

38 }

39 }, true);

40 var mouseDrop = function(event) {

41 if (draggedElement) {

42 dropFunc(

43 originalElement,

44 elementOffsetX + mouseX - mouseOffsetX,

45 elementOffsetY + mouseY - mouseOffsetY

46 );

47 originalElement.style.visibility = '';

48 draggedElement.parentNode.removeChild(draggedElement);

49 originalElement = null;

50 draggedElement = null;

51 }

52 };

53 window.addEventListener("mouseup", mouseDrop, true);

54 window.addEventListener("mousedown", mouseDrop, true);

55 var elements = document.getElementsByTagName("*");

56 for (var i=0; i<elements.length; i++) {

57 var element = elements[i];

58 if (element.className == "movable") {

59 element.addEventListener("mousedown", function(event) {

60 event.target.style.cursor = "move";

61 dragElement(event.currentTarget, function(element, dropX, dropY) {

62 event.target.style.cursor = '';

63 elementDropped(element, dropX, dropY);

64 });

65 event.preventDefault();

66 }, false);

67 } else if (element.className == "clickable") {

68 element.addEventListener("mousedown", function(event) {

69 event.stopPropagation();

70 }, false);

71 }

72 }

73 }, false);