code-guild/code-guild/javascript/HTML5_drag.js at master · movemountains/code-guild · GitHub

Repository navigation

History

77 lines (63 loc) · 2.12 KB

Raw

//create a nodelist

var boxes = document.querySelectorAll('#drag-these .drag-and-drop');

//create an array to push the nodes into

var boxesArray = [];

//move nodes into an array

for (var i = 0; i < boxes.length; i++) {

boxesArray.push(boxes[i]);

}

//used to store the element that drag initiates from

var dragSourceElement = null;

//event handler for the beginning of the drag

function handleDragStart (e) {

//change opacity for feedback

this.style.opacity = '0.75'

dragSourceElement = this;

//capture the inner HTML data from the element initiating the drag

e.dataTransfer.effectAllowed = 'move';

e.dataTransfer.setData('text/html', this.innerHTML);

}

//this handler allows us to drop an element when it is over a droppable area

function handleDragOver (e) {

if (e.preventDefault) {

e.preventDefault();

}

e.dataTransfer.dropEffect = 'move';

return false;

}

//these handlers will toggle the over class to indicate where something can be

//dropped to

function handleDragEnter (e) {

this.classList.add('over');

}

function handleDragLeave (e) {

this.classList.remove('over');

}

//allow the drop and prevent bubbling

function handleDrop (e) {

if (e.stopPropagation) {

e.stopPropagation();

}

//check if the element being dropped onto is the source element of hte drag

if (dragSourceElement != this) {

//set the element being dropped to the data stored from the initiator

dragSourceElement.innerHTML = this.innerHTML;

this.innerHTML = e.dataTransfer.getData('text/html');

}

return false;

}

//remove the over class after the drop

function handleDragEnd (e) {

boxesArray.forEach(function (node) {

node.classList.remove('over');

});

}

//add event listeners to each node to handle dragging events

boxesArray.forEach(function (node) {

node.addEventListener('dragstart', handleDragStart, false);

node.addEventListener('dragenter', handleDragEnter, false);

node.addEventListener('dragover', handleDragOver, false);

node.addEventListener('dragleave', handleDragLeave, false);

node.addEventListener('drop', handleDrop, false);

node.addEventListener('dragend', handleDragEnd, false);

});

code-guild/code-guild/javascript/HTML5_drag.js at master · movemountains/code-guild · GitHub

Repository navigation

Expand file tree

Breadcrumbs

HTML5_drag.js

Latest commit

History

Breadcrumbs

HTML5_drag.js

File metadata and controls