Перемещение DIV с использованием XUI - PullRequest
Новая
       28

Перемещение DIV с использованием XUI

0 голосов
/ 13 декабря 2011

Я пытаюсь создать эффект перетаскивания на div, используя xuijs.Я действительно не знаю, какое событие смотреть и слушать, и что с ним делать, чтобы оно скользило.

Мне нужно, чтобы оно следовало за курсором мыши (только двигаться по оси x)

Вот пример того, что я обычно пытаюсь сделать 

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

Если slideMe щелкают и перетаскивают, он должен перемещаться с одного конца на другой (приведенный выше HTML-это просто пример, этоконечно не совсем правильно)

У кого-нибудь есть общее представление о том, как этого можно достичь?

1 Ответ

1 голос
/ 13 декабря 2011

Вы можете добавить Even Listener к мыши для захвата перемещения мыши. 

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 в левое и правое;Затем вам нужно изменить эти коды, как показано ниже.

Стиль: 

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