Question

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

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

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

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

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

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

Answer 1

您可以向鼠标添加偶数侦听器以捕捉鼠标移动。

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可以放置光标。但是你想把它转移到levf和right中的另一个div中;然后，您需要更改以下代码。

风格：

 #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
  }

使用XUI移动DIV

1 个答案: