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

マウスに Event Listener を追加して、mousemove をキャプチャすることができます。

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

次に、関数を使用してdivを移動できますmouseMove。その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 と右に移動したいと考えていました。次に、これらのコードを以下のように変更する必要があります。

スタイル：

 #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 に答える