title: How to drag or move a span into the Div by using javascript
body: <p>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. </p>
  
  <p>I need to calculate pixels and drag the Span inside the Div. Here is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 &lt; ((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;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bar"&gt;
    &lt;span class="handle" onmousedown="handlersDown()" onmousemove="dragging(event)"&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>