How to drag or move a span into the Div by using javascript

Question

How to move or drag the span into the Div element. My element structure is the Div -> Span. Here I need to drag the Span inside the div element without drag beyond that div. I have tried this by calculating pixels but didn't give a solution. I don't need a native onDrag method.

I need to calculate pixels and drag the Span inside the Div. Here is my code.

 var handleClick = false; window.dragging = function(event) { if (handleClick) { var bar = document.getElementsByClassName('bar')[0], handle = document.getElementsByClassName('handle')[0]; var left = bar.offsetWidth - handle.offsetWidth; tops = (bar.offsetWidth - handle.offsetWidth); pixel = left < ((pixel - 0) / 1.233445) ? left : ((pixel - 0) / 1.233445); handle.style.left = pixel + "px"; } } document.addEventListener('mouseup', function() { handleClick = false; }); window.handlersDown = function() { handleClick = true; }

 .bar { width: 100px; height: 30px; border: 1px solid; position: relative; } .handle { width: 20px; height: 20px; left: 2px; top: 5px; background-color: rgba(255, 0, 0, 0.5); position: absolute; }

 <div class="bar"> <span class="handle" onmousedown="handlersDown()" onmousemove="dragging(event)"></span> </div>

Answer 1

I have modified your code a bit and changed the selectors from class to ID. I also would advice you to use external libraries to make it more easy for you. Besides that I also removed the event listeners inside your HTML and translate them to Javascript. Is this what you want?

 window.onload = addListeners(); function addListeners(){ document.getElementById('handle').addEventListener('mousedown', mouseDown, false); window.addEventListener('mouseup', mouseUp, false); } function mouseUp() { window.removeEventListener('mousemove', spanMove, true); } function mouseDown(e){ window.addEventListener('mousemove', spanMove, true); } function spanMove(e){ var bar = document.getElementById('bar') var span = document.getElementById('handle'); // variables var bar_width = bar.offsetWidth; var handle_width = span.offsetWidth; // stop scroll left if the minimum and maximum is reached if(e.clientX < bar_width - handle_width - 1 && e.clientX > 1){ span.style.left = e.clientX + 'px'; } }

 #bar { width: 100px; height: 30px; border: 1px solid; position: relative; } #handle { width: 20px; height: 20px; left: 2px; top: 5px; background-color: rgba(255, 0, 0, 0.5); position: absolute; }

 <div id="bar"> <span id="handle"></span> </div>

Answer 2

In 2020, following solution works perfectly on last version of Chrome, Opera, Firefox and Edge Chromium.

 window.onload = addListeners(); function addListeners() { var div = document.getElementById('div'); var span = document.getElementById('span'); span.addEventListener('mousedown', onMouseDown, false); window.addEventListener('mouseup', onMouseUp, false); //compute space between left border of <div> and left border of <span> // this value is also used to compute space at right iMinLeft = span.offsetLeft; // compute max left value allowed so that span remains in <div> iMaxLeft = div.clientWidth - span.offsetWidth - iMinLeft; } function onMouseDown(e) { if (e.which === 1) // left button is pressed { e.preventDefault(); window.addEventListener('mousemove', onMouseMove, true); // save mouse X position to compute deplacement posMouseX = e.clientX; span.style.background = "yellow"; } } function onMouseMove(e) { e.preventDefault(); //compute mouse deplacement deltaX = posMouseX - e.clientX; //compute new left position of <span> element iNewLeft = span.offsetLeft - deltaX; if (iNewLeft < iMinLeft) { iNewLeft = iMinLeft; } else { if (iNewLeft > iMaxLeft) { iNewLeft = iMaxLeft; } } span.style.left = iNewLeft + 'px'; // save mouse X position to compute NEXT deplacement posMouseX = e.clientX; } function onMouseUp(e) { if (e.which === 1) // left button is pressed { e.preventDefault(); span.style.background = "white"; window.removeEventListener('mousemove', onMouseMove, true); } }

 #div { width: 200px; height: 50px; border: 1px solid; position: relative; left: 50px; } #span { cursor: pointer; font-size: 30px; width: auto; height: 40px; left: 2px; top: 5px; position: absolute; }

 <div id="div"> <span id="span">&#x1F603</span> </div>

JavaScript line e.preventDefault(); is necessary to avoid <span> to become 'blue' when dragging.

CSS code cursor: pointer; is only to see that unicode is clickable.

Javascript line if (e.which === 1) has been added to prevent emoticon to move when RIGHT mouse button is clicked.

The rectangle around emoticon when <span> is dragged move without being shifted (see previous solution) and space remaining in left or in right are equal.

Thanks to w3schools-exemple