-
Notifications
You must be signed in to change notification settings - Fork 0
/
drag-n-drop.js
102 lines (71 loc) · 2.24 KB
/
drag-n-drop.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
function getElementXY( element ) {
var rect = element.getBoundingClientRect();
var xy = {
x: rect.left,
y: rect.top,
};
return xy;
}
function makeSubstitue( elem ) {
var $elem = $( elem );
var subsCss = {
opacity: 0.2
};
var $subs = $elem.clone();
$subs
.css( subsCss )
.insertAfter( $elem );
return $subs;
}
function moveElement( elem, distanceX, distanceY ) {
var elemXY = getElementXY( elem );
var style = window.getComputedStyle( elem );
var marginLeft = parseInt( style.getPropertyValue('margin-left') );
var marginTop = parseInt( style.getPropertyValue('margin-top') );
var newCss = {
position: 'fixed',
top: elemXY.y - marginTop + distanceY,
left: elemXY.x - marginLeft + distanceX
};
$( elem ).css( newCss );
}
function enableDrag( elem ) {
var mouseDownXY;
var oldMouseXY = null;
var isDragStarted = false;
var $substitute = null;
$( window ).on( 'mousedown touchstart', function ( event ) {
if ( event.target !== elem ) {
return;
}
var mouseXY = {
x: event.clientX,
y: event.clientY
};
isDragStarted = true;
oldMouseXY = mouseXY;
$substitute = makeSubstitue( elem );
} );
$( window ).on( 'mouseup touchend', function ( event ) {
if ( isDragStarted === false ) {
return;
}
isDragStarted = false;
$substitute.remove();
});
$( window ).on( 'mousemove touchmove', function ( event ) {
if ( isDragStarted === false
|| oldMouseXY === null ) {
return;
}
var $elem = $( '#drag-me' );
var elem = $elem.get(0);
var currentMouseXY = { x: event.clientX, y: event.clientY };
var distanceX = currentMouseXY.x - oldMouseXY.x;
var distanceY = currentMouseXY.y - oldMouseXY.y;
moveElement( elem, distanceX, distanceY );
oldMouseXY = currentMouseXY;
});
}
var d = document.getElementById( 'drag-me' );
enableDrag( d );