/
draggable.js
105 lines (102 loc) · 4 KB
/
draggable.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/*--------------------------------------------------------------------------------------------
| @desc: Draggable element using pure javascript
| @author: Aravind Buddha
| @url: http://www.techumber.com
| @date: 14 FEB 2013
| @email: aravind@techumber.com
| @license: Free! to Share,copy, distribute and transmit ,
| but i'll be glad if my name listed in the credits'
---------------------------------------------------------------------------------------------*/
// This is a modified version of the code credited above
// Modifications made to suit glumal:
// - Random X Position on initialize
// - Touchscreen Compatible
// - -5px bottom pos on initialize, switch to top later on
var Draggable = function (elem) {
var el = elem,
isDragReady = false,
dragoffset = {
x: 0,
y: 0
};
this.init = function () {
this.initPosition();
this.events();
};
//only for this demo
this.initPosition = function () {
el.style.position = "absolute";
el.style.bottom = "-5px";
el.style.left = Math.floor(Math.random() * (document.documentElement.clientWidth - (el.offsetWidth + 20))) + 10 + "px";
};
//events for the element
this.events = function () {
var self = this;
_on(el, 'mousedown', function (e) {
if(e.target === el || e.target.className === "window-title") {
isDragReady = true;
//corssbrowser mouse pointer values
var px, py;
if(e.touches && e.touches[0]) {
px = e.touches[0].pageX || e.touches[0].clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
py = e.touches[0].pageY || e.touches[0].clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
} else {
px = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
py = e.pageY || e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
}
dragoffset.x = e.pageX - el.offsetLeft;
dragoffset.y = e.pageY - el.offsetTop;
e.preventDefault();
}
}, "touchstart");
_on(document, 'mouseup', function (e) {
isDragReady = false;
e.preventDefault();
}, 'touchend');
_on(document, 'mousemove', function (e) {
if (isDragReady) {
el.style.bottom = "";
var px, py;
if(e.touches && e.touches[0]) {
px = e.touches[0].pageX || e.touches[0].clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
py = e.touches[0].pageY || e.touches[0].clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
} else {
px = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
py = e.pageY || e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
}
if(e.touches && e.touches[0]) {
el.style.top = (py) + "px";
el.style.left = (px) + "px";
} else {
el.style.top = (py - dragoffset.y) + "px";
el.style.left = (px - dragoffset.x) + "px";
}
e.preventDefault();
}
}, "touchmove");
};
//cross browser event Helper function
var _on = function (el, event, fn, evt2) {
document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
if(evt2) {
document.attachEvent ? el.attachEvent('on' + evt2, fn) : el.addEventListener(evt2, fn, !0);
}
};
this.init();
}