使用XUI移动DIV

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编辑:这些功能使休眠您的光标。但是您希望将其移动到另一个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
  }