0

我正在尝试使用 xuijs 在 div 上创建拖动效果。我真的不知道要查看哪个事件以及如何处理它以使其滑动。

我需要它跟随鼠标的光标（仅在 x 轴上移动）

这是我通常尝试做的一个例子

<div id="parent" style="width: 100px; height: 20px;">
    <div id="slideMe" style="width: 50px; height: 20px;">
    </div>
</div>

如果点击并拖动slideMe，它应该从一端移动到另一端（上面的html只是一个例子，当然不完全正确）

任何人都知道如何实现这一目标？

4

1 回答 1

1

您可以将 Even Listener 添加到鼠标以捕获 mousemove。

window.addEventListener('mousemove', mouseMove, false);

mouseMove然后你可以用函数移动你的 div 。您可以使该 div 闲置您的光标。

function mouseMove(e) {
    if (IE) {
      Xcord = event.clientX + document.body.scrollLeft;
      Ycord = event.clientY + document.body.scrollTop;
    } else {
      Xcord = e.pageX;
      Ycord = e.pageY;
    }

    if (Xcord < 0) Xcord = 0;
    if (Ycord < 0) Ycord = 0;

    document.getElementById('slideMe').style.top = Ycord + 'px';
    document.getElementById('slideMe').style.left = Xcord + 'px';

    return true
  }

但在此之前，您需要设置您的 div 样式，如下所示

#slideMe{
     position:absolute;
}

编辑：这些功能使 div 使您的光标闲置。但是你想把它移到另一个 div 到 levf 和 right；然后您需要更改这些代码，如下所示。

风格：

 #slideMe{
     position:relative;
 }

功能：

function mouseMove(e) {
    if (IE) {
      Xcord = event.clientX + document.body.scrollLeft;
      Ycord = event.clientY + document.body.scrollTop;
    } else {
      Xcord = e.pageX;
      Ycord = e.pageY;
    }

    if (Xcord < 0) Xcord = 0;
    if (Ycord < 0) Ycord = 0;

    //document.getElementById('slideMe').style.top = Ycord + 'px';
    document.getElementById('slideMe').style.left = Xcord + 'px';

    return true
  }
于 2011-12-12T23:24:33.393 回答