1 if (!jsFail) {

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

3 var originalElement;

4 var draggedElement;

5 var mouseX;

6 var mouseY;

7 var mouseOffsetX;

8 var mouseOffsetY;

9 var elementOffsetX;

10 var elementOffsetY;

11 var dropFunc;

12 var dragElement = function(element, func) {

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

14 originalElement = element;

15 draggedElement = originalElement.cloneNode(true);

16 originalElement.style.visibility = "hidden";

17 draggedElement.style.margin = 0;

18 draggedElement.style.position = "absolute";

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

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

21 draggedElement.style.width = originalElement.clientWidth;

22 draggedElement.style.height = originalElement.clientHeight;

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

24 draggedElement.style.opacity = 0.8;

25 originalElement.offsetParent.appendChild(draggedElement);

26 // workaround for wrong clientWidth and clientHeight information:

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

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

29 mouseOffsetX = mouseX;

30 mouseOffsetY = mouseY;

31 dropFunc = func;

32 };

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

34 mouseX = event.pageX;

35 mouseY = event.pageY;

36 if (draggedElement) {

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

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

39 }

40 }, true);

41 var mouseDrop = function(event) {

42 if (draggedElement) {

43 dropFunc(

44 originalElement,

45 elementOffsetX + mouseX - mouseOffsetX,

46 elementOffsetY + mouseY - mouseOffsetY

47 );

48 originalElement.style.visibility = '';

49 draggedElement.parentNode.removeChild(draggedElement);

50 originalElement = null;

51 draggedElement = null;

52 }

53 };

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

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

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

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

58 var element = elements[i];

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

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

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

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

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

64 elementDropped(element, dropX, dropY);

65 });

66 event.preventDefault();

67 }, false);

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

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

70 event.stopPropagation();

71 }, false);

72 }

73 }

74 }, false);

75

76 }