Currently, I am experimenting with an HTML5 drag-and-drop feature. You can view my work using this JSFiddle link: http://jsfiddle.net/e4ogxcum/3/
My goal is to modify the functionality so that it prevents the toolbar from being dropped halfway off the page. Is there a way to achieve this?
In simpler terms, I want to restrict the option of dropping the toolbar in a position where it's partially off the page, as shown below:
Below you will find the complete code:
function drag_start(event) {
console.log('drag_start', event);
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
event.preventDefault();
var offset = event.dataTransfer.getData("text/plain").split(',');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
return false;
}
var dm = document.getElementById('taskbar');
dm.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false)
;