javascript - 如何使用 javascript 将跨度拖动或移动到 Div 中

Question

如何将 span 移动或拖动到 Div 元素中。我的元素结构是 Div -> Span。在这里，我需要将 Span 拖到 div 元素内，而不拖到该 div 之外。我已经通过计算像素来尝试这个但没有给出解决方案。我不需要原生的 onDrag 方法。

我需要计算像素并将 Span 拖到 Div 中。这是我的代码。

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

我稍微修改了您的代码并将选择器从类更改为 ID。我还建议您使用外部库来使您更轻松。除此之外，我还删除了 HTML 中的事件监听器并将它们转换为 Javascript。这是你想要的吗？

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>