make element draggable
/*
OPTIMIZED DRAG AND DROP SYSTEM
Requirements to work:
1. Element you want to drag must have class "DraggableItem"
2. Element must have position set to "absolute"
*/
//Make all draggable elements work.
var draggableItems = Array.from(document.querySelectorAll('.DraggableItem'));
console.log(`There are ${draggableItems.length} draggable items.`);
//Loop over each draggable item and add the listeners
for (var i = 0; i < draggableItems.length; i++) {
var element = draggableItems[i];
dragElement(element);
}
function dragElement(ele) {
//Listen for whenever the element is clicked
ele.addEventListener('mousedown', dragMouseDown);
//vars to hold the listeners after the mouse
var mouseMoveListener;
var mouseUpListener;
//Save the mouse offset on the element, so it will not snap to top left corner when starting to drag
var offsetX = 0, offsetY = 0;
function dragMouseDown(e) {
//Set the offsets
offsetX = e.offsetX;
offsetY = e.offsetY;
//Add the listeners
mouseMoveListener = window.addEventListener('mousemove', elementDrag);
mouseUpListener = window.addEventListener('mouseup', dragMouseUp);
}
function dragMouseUp(e) {
//remove the listeners, which stops teh element from following the mouse
mouseMoveListener = window.removeEventListener('mousemove', elementDrag);
mouseUpListener = window.removeEventListener('mouseup', dragMouseUp);
}
function elementDrag(e) {
//move the element
ele.style.left = (e.clientX - offsetX) + "px";
ele.style.top = (e.clientY - offsetY) + "px";
}
}