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
|
var box;
var boxX = 0, boxY = 0;
document.addEventListener( 'DOMContentLoaded', init, false );
function init() {
box = document.querySelector('#box');
box.addEventListener( 'click', onClick, false );
box.addEventListener( 'mousedown', onMousedown, false );
}
// ----- ----- //
var linkClickEvent;
// ----- mouse ----- //
var mousedownX, mousedownY;
var dragStartX, dragStartY;
var dragStartBoxX, dragStartBoxY;
var mouseDownEvent;
function onMousedown( event ) {
event.preventDefault();
// kludge to blur focused inputs in dragger
var focused = document.activeElement;
if ( focused && focused.blur ) {
focused.blur();
}
mousedownX = event.pageX;
mousedownY = event.pageY;
window.addEventListener( 'mousemove', onMousemove, false );
window.addEventListener( 'mouseup', onMouseup, false );
}
var isDragging = false;
function onMousemove( event ) {
// don't move until mouse has moved at least 3 pixels in any direction
var moveX = event.pageX - mousedownX;
var moveY = event.pageY - mousedownY;
var bigMove = Math.max( Math.abs( moveX ), Math.abs( moveY ) );
if ( !isDragging && bigMove > 3 ) {
dragStartX = event.pageX;
dragStartY = event.pageY;
// position of box when drag started
dragStartBoxX = boxX;
dragStartBoxY = boxY;
isDragging = true;
// disable clicks
shouldClick = false;
}
if ( isDragging ) {
boxX = dragStartBoxX + ( event.pageX - dragStartX );
boxY = dragStartBoxY + ( event.pageY - dragStartY );
box.style.left = boxX + 'px';
box.style.top = boxY + 'px';
}
}
var shouldClick = true;
function onMouseup( event) {
if ( !isDragging ) {
// allow click in text input
if ( event.target.nodeName === 'INPUT' && event.target.type === 'text' ) {
event.target.focus();
}
}
console.log('mouse up');
isDragging = false;
setTimeout( function() {
shouldClick = true;
})
window.removeEventListener( 'mousemove', onMousemove, false );
window.removeEventListener( 'mouseup', onMouseup, false );
}
// ----- click ----- //
function onClick( event ) {
if ( !shouldClick ) {
event.preventDefault();
} else {
console.log('non drag click');
}
}
|
