Implementing Drag And Drop


Today we will be implementing the Drag and Drop API. so these are the functions below that will be adding the event listeners

// drop event Handler
var handleDrop = function(e) {
if(e.preventDefault) { e.preventDefault(); }
if(e.stopPropagation) { e.stopPropagation(); }
console.log(‘handling drop,’,e.pageX,e.pageY,e);
const elemId = e.dataTransfer.getData(‘textId’);
const domElem = document.getElementById(elemId);
domElem.style.top = addPixels(pageY) || addPixels(e.pageY);
domElem.style.left = addPixels(pageX) || addPixels(e.pageX)
return false;
}

// drag Start Handler…
var handleDragStart = function(event){
event.stopPropagation();
event.dataTransfer.setData(‘textId’, event.currentTarget.id);
}
var handleDragEnter = function(e) {
e.preventDefault();
e.stopPropagation();
console.log(“dragEnter”);
return false;
};

var handleDragOver = function(e) {
e.preventDefault();
e.stopPropagation();
console.log(“dragOver”,e.pageX,e.pageY);
pageX = e.pageX;
pageY = e.pageY;
return false;
};

var handleDragLeave = function(e) {
e.preventDefault();
e.stopPropagation();
console.log(“dragLeave”);
return false;
};
//handle drag end….
var handleDragEnd = function(e) {
e.stopPropagation();
e.preventDefault();
console.log(e,e.pageX,e.pageY,””)
e.currentTarget.style.opacity = 1;
}

The above methods as explained in the previous post as well, will be the event listeners for the various drag and drop event listeners.

var addingDragDropEventListeners = function(elem) {
elem.setAttribute(‘draggable’,true);
elem.addEventListener(‘dragstart’,handleDragStart,false);
elem.addEventListener(‘dragenter’, handleDragEnter);
elem.addEventListener(‘dragleave’, handleDragLeave);
elem.addEventListener(‘dragend’,handleDragEnd);
return elem;
}

This method as it’s name specifies about adding the drag and drop event listeners to the specified DOM element.

addingDragDropEventListeners(textControlDiv);
This will add the drag and drop to the current element :). This is all about how I add the drag and drop API to the text box.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s