Source Code:
(back to article)
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> #text { cursor: pointer; cursor: pointer; width: 40px; height: 40px; } </style> </head> <body> <p id='text'>Drag the text</p> <script> let currentDroppable = null; text.onmousedown = function(event) { let shiftX = event.clientX - text.getBoundingClientRect() .left; let shiftY = event.clientY - text.getBoundingClientRect() .top; text.style.position = 'absolute'; text.style.zIndex = 1000; document.body.append(text); moveAt(event.pageX, event.pageY); function moveAt(pageX, pageY) { text.style.left = pageX - shiftX + 'px'; text.style.top = pageY - shiftY + 'px'; } function onMouseMove(event) { moveAt(event.pageX, event.pageY); text.hidden = true; let elemBelow = document.elementFromPoint(event.clientX, event.clientY); text.hidden = false; if(!elemBelow) return; let droppableBelow = elemBelow.closest('.droppable'); if(currentDroppable != droppableBelow) { if(currentDroppable) { // null when we were not over a droppable before this event leaveDroppable(currentDroppable); } currentDroppable = droppableBelow; if(currentDroppable) { // null if we're not coming over a droppable now // (maybe just left the droppable) enterDroppable(currentDroppable); } } } document.addEventListener('mousemove', onMouseMove); text.onmouseup = function() { document.removeEventListener('mousemove', onMouseMove); text.onmouseup = null; }; }; function enterDroppable(elem) { elem.style.background = 'pink'; } function leaveDroppable(elem) { elem.style.background = ''; } text.ondragstart = function() { return false; }; </script> </body> </html>
Result:
Report an issue