https://tetobox-budapest.hu/include/js/DragDiv.js

1// Determine browser and version.
2
3function Browser() {
4
5  var ua, s, i;
6
7  this.isIE    = false;
8  this.isNS    = false;
9  this.version = null;
10
11  ua = navigator.userAgent;
12
13  s = "MSIE";
14  if ((i = ua.indexOf(s)) >= 0) {
15    this.isIE = true;
16    this.version = parseFloat(ua.substr(i + s.length));
17    return;
18  }
19
20  s = "Netscape6/";
21  if ((i = ua.indexOf(s)) >= 0) {
22    this.isNS = true;
23    this.version = parseFloat(ua.substr(i + s.length));
24    return;
25  }
26
27  // Treat any other "Gecko" browser as NS 6.1.
28
29  s = "Gecko";
30  if ((i = ua.indexOf(s)) >= 0) {
31    this.isNS = true;
32    this.version = 6.1;
33    return;
34  }
35}
36
37var browser = new Browser();
38
39// Global object to hold drag information.
40
41var dragObj = new Object();
42dragObj.zIndex = 0;
43
44function dragStart(event, id) {
45  var el;
46  var x, y;
47
48  // If an element id was given, find it. Otherwise use the element being
49  // clicked on.
50
51  if (id)
52    dragObj.elNode = document.getElementById(id);
53  else {
54    if (browser.isIE)
55      dragObj.elNode = window.event.srcElement;
56    if (browser.isNS)
57      dragObj.elNode = event.target;
58
59    // If this is a text node, use its parent element.
60
61    if (dragObj.elNode.nodeType == 3)
62      dragObj.elNode = dragObj.elNode.parentNode;
63  }
64
65  // Get cursor position with respect to the page.
66
67  if (browser.isIE) {
68    x = window.event.clientX + document.documentElement.scrollLeft
69      + document.body.scrollLeft;
70    y = window.event.clientY + document.documentElement.scrollTop
71      + document.body.scrollTop;
72  }
73  if (browser.isNS) {
74    x = event.clientX + window.scrollX;
75    y = event.clientY + window.scrollY;
76  }
77
78  // Save starting positions of cursor and element.
79
80  dragObj.cursorStartX = x;
81  dragObj.cursorStartY = y;
82  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
83  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
84
85  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
86  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
87
88  // Update element's z-index.
89
90  dragObj.elNode.style.zIndex = ++dragObj.zIndex;
91
92  // Capture mousemove and mouseup events on the page.
93
94  if (browser.isIE) {
95    document.attachEvent("onmousemove", dragGo);
96    document.attachEvent("onmouseup",   dragStop);
97    window.event.cancelBubble = true;
98    window.event.returnValue = false;
99  }
100  if (browser.isNS) {
101    document.addEventListener("mousemove", dragGo,   true);
102    document.addEventListener("mouseup",   dragStop, true);
103    event.preventDefault();
104  }
105}
106
107function dragGo(event) {
108
109  var x, y;
110
111  // Get cursor position with respect to the page.
112
113  if (browser.isIE) {
114    x = window.event.clientX + document.documentElement.scrollLeft
115      + document.body.scrollLeft;
116    y = window.event.clientY + document.documentElement.scrollTop
117      + document.body.scrollTop;
118  }
119  if (browser.isNS) {
120    x = event.clientX + window.scrollX;
121    y = event.clientY + window.scrollY;
122  }
123
124  // Move drag element by the same amount the cursor has moved.
125
126  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
127  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
128
129  if (browser.isIE) {
130    window.event.cancelBubble = true;
131    window.event.returnValue = false;
132  }
133  if (browser.isNS)
134    event.preventDefault();
135}
136
137function dragStop(event) {
138
139  // Clear the drag element global.
140
141  dragObj.elNode = null;
142
143  // Stop capturing mousemove and mouseup events.
144
145  if (browser.isIE) {
146    document.detachEvent("onmousemove", dragGo);
147    document.detachEvent("onmouseup",   dragStop);
148  }
149  if (browser.isNS) {
150    document.removeEventListener("mousemove", dragGo,   true);
151    document.removeEventListener("mouseup",   dragStop, true);
152  }
153}