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

Question

如何将跨度移动或拖动到 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

我稍微修改了您的代码并将选择器从 class 更改为 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>

Answer 2

2020 年，以下解决方案在 Chrome、Opera、Firefox 和 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 行 e.preventDefault(); 是必需的，以避免拖动时 <span> 变成 'blue'。

CSS代码cursor: pointer;只是看到unicode是可以点击的

Javascript 添加了行 if (e.which === 1) 以防止表情符号在单击 RIGHT 鼠标按钮时移动。

拖动<span>时表情周围的矩形不移动（见前面的解决方案）和留在左边或右边的space是相等的。

感谢w3schools-exemple

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

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

html

javascript

css

drag