|
3
|
1 'use strict';
|
|
|
2
|
|
|
3 let dad = {};
|
|
|
4
|
|
|
5 {
|
|
4
|
6 // override these if needed
|
|
3
|
7 dad.whatToDrag = function(draggable) {
|
|
|
8 return draggable;
|
|
|
9 };
|
|
4
|
10 dad.onDrop = function(event) {};
|
|
|
11 dad.onDropped = function(event) {};
|
|
3
|
12
|
|
|
13
|
|
|
14 let original = null;
|
|
|
15 let dragging = null;
|
|
|
16 let touchX, touchY;
|
|
|
17
|
|
|
18 function onMouseMove(event) {
|
|
|
19 //console.log(event);
|
|
|
20 event.preventDefault();
|
|
|
21 let rect = dragging.getBoundingClientRect();
|
|
|
22 dragging.style.left = `${rect.x+event.movementX}px`;
|
|
|
23 let y = rect.y + event.movementY;
|
|
|
24 if( y < 0 ) {
|
|
|
25 window.scrollBy( 0, y );
|
|
|
26 } else if( y + rect.height > window.innerHeight ) {
|
|
|
27 window.scrollBy( 0, y + rect.height - window.innerHeight );
|
|
|
28 }
|
|
|
29 dragging.style.top = `${y}px`;
|
|
|
30 }
|
|
|
31
|
|
|
32 function onTouchMove(event) {
|
|
|
33 let touches = event.touches;
|
|
|
34 if( touches.length !== 1 )
|
|
|
35 return;
|
|
|
36 let touch = touches[0];
|
|
|
37 let x = touch.clientX;
|
|
|
38 let y = touch.clientY;
|
|
|
39 event.movementX = x - touchX;
|
|
|
40 event.movementY = y - touchY;
|
|
|
41 touchX = x;
|
|
|
42 touchY = y;
|
|
|
43 onMouseMove(event);
|
|
|
44 }
|
|
|
45
|
|
|
46 function onMouseUp(event) {
|
|
|
47 //console.log(event);
|
|
4
|
48 dad.onDrop({
|
|
5
|
49 original: original,
|
|
|
50 dragging: dragging,
|
|
4
|
51 mouseEvent: event,
|
|
|
52 });
|
|
3
|
53 original.removeAttribute('dad-original');
|
|
4
|
54 dragging.parentNode.removeChild(dragging);
|
|
3
|
55 document.removeEventListener('mousemove',onMouseMove);
|
|
|
56 document.removeEventListener('mouseup',onMouseUp);
|
|
|
57 document.removeEventListener('mousemove',onMouseMove);
|
|
|
58 document.removeEventListener('touchend',onMouseUp);
|
|
|
59 original.scrollIntoViewIfNeeded(false);
|
|
4
|
60 let droppedEvent = {
|
|
5
|
61 original: original,
|
|
4
|
62 };
|
|
3
|
63 original = null;
|
|
|
64 dragging = null;
|
|
4
|
65 dad.onDropped(droppedEvent);
|
|
3
|
66 }
|
|
|
67
|
|
|
68 function start(event) {
|
|
|
69 //console.log(event);
|
|
|
70 original = dad.whatToDrag(event.target);
|
|
|
71 dragging = original.cloneNode(true);
|
|
|
72 original.setAttribute('dad-original','');
|
|
|
73 dragging.setAttribute('dad-dragging','');
|
|
|
74 let rect = original.getBoundingClientRect();
|
|
|
75 dragging.style.left = `${rect.x}px`;
|
|
|
76 dragging.style.top = `${rect.y}px`;
|
|
4
|
77 original.parentNode.appendChild(dragging);
|
|
3
|
78 }
|
|
|
79
|
|
|
80 function onMouseDown(event) {
|
|
|
81 start(event);
|
|
|
82 document.addEventListener('mousemove',onMouseMove);
|
|
|
83 document.addEventListener('mouseup',onMouseUp);
|
|
|
84 }
|
|
|
85
|
|
|
86 function onTouchStart(event) {
|
|
|
87 start(event);
|
|
|
88 let touches = event.touches;
|
|
|
89 if( touches.length !== 1 )
|
|
|
90 return;
|
|
|
91 let touch = touches[0];
|
|
|
92 touchX = touch.clientX;
|
|
|
93 touchY = touch.clientY;
|
|
|
94 document.addEventListener('touchmove',onTouchMove);
|
|
|
95 document.addEventListener('touchend',onMouseUp);
|
|
|
96 }
|
|
|
97
|
|
|
98 dad.setDraggable = function(el) {
|
|
|
99 el.setAttribute('dad-drag','');
|
|
|
100 el.addEventListener('mousedown',onMouseDown);
|
|
|
101 el.addEventListener('touchstart',onTouchStart);
|
|
|
102 };
|
|
|
103 }
|
