1 jsProtect(function() {

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

3 jsProtect(function() {

4 var originalElement;

5 var draggedElement;

6 var mouseX;

7 var mouseY;

8 var mouseOffsetX;

9 var mouseOffsetY;

10 var elementOffsetX;

11 var elementOffsetY;

12 var dropFunc;

13 var dragElement = function(element, func) {

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

15 originalElement = element;

16 draggedElement = originalElement.cloneNode(true);

17 originalElement.style.visibility = "hidden";

18 draggedElement.style.margin = 0;

19 draggedElement.style.position = "absolute";

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

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

22 draggedElement.style.width = originalElement.clientWidth;

23 draggedElement.style.height = originalElement.clientHeight;

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

25 draggedElement.style.opacity = 0.8;

26 originalElement.offsetParent.appendChild(draggedElement);

27 // workaround for wrong clientWidth and clientHeight information:

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

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

30 mouseOffsetX = mouseX;

31 mouseOffsetY = mouseY;

32 dropFunc = func;

33 };

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

35 jsProtect(function() {

36 mouseX = event.pageX;

37 mouseY = event.pageY;

38 if (draggedElement) {

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

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

41 }

42 });

43 }, true);

44 var mouseDrop = function(event) {

45 jsProtect(function() {

46 if (draggedElement) {

47 dropFunc(

48 originalElement,

49 elementOffsetX + mouseX - mouseOffsetX,

50 elementOffsetY + mouseY - mouseOffsetY

51 );

52 originalElement.style.visibility = '';

53 draggedElement.parentNode.removeChild(draggedElement);

54 originalElement = null;

55 draggedElement = null;

56 }

57 });

58 };

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

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

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

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

63 var element = elements[i];

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

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

66 jsProtect(function() {

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

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

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

70 elementDropped(element, dropX, dropY);

71 });

72 event.preventDefault();

73 });

74 }, false);

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

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

77 jsProtect(function() {

78 event.stopPropagation();

79 });

80 }, false);

81 }

82 }

83 });

84 }, false);

85 });