Как мне переложить это на jQuery?
 

Здраствуйте,
Прошу помочь мне разобраться с событиями.
Есть к примеру код, в сумме, который выполняет перетаскивание елемента.
Суть в том, что я немогу понять как мне переложить это на jQuery.

var x = 0, drag = 0, elem = document.getElementById('move');

elem.onmousedown = function(event){
   event = event || window.event;
   x = event.clientX+document.body.scrollLeft-parseInt(elem.style.left);
   drag=true;
}
elem.ondragstart = function() {
   return false;
}

document.onmouseup = function() {
   drag = false;
}
document.onmousemove = function(event) {
   event = event || window.event;
   if(drag){
      elem.style.left=event.clientX+document.body.scrollLeft-x;
   }
}

Попробвал преобразовать, но почему-то безуспешно

var x = 0, drag = 0, elem = $('#move');
elem.mousedown(function(event){
   x = event.clientX+document.body.scrollLeft-parseInt(elem.style.left);
   drag=true;
});

elem.dragstart(function(event){
   return false;
});

document.mouseup(function(event){
   drag = false;
});

document.mousemove(function(event){
   if(drag){
      elem.style.left = event.clientX+document.body.scrollLeft-x;
   }
});

Объясните на каком этапе я допустил ошибку?


Неужели, чтобы сделать простой drag & drop из 10 строчек, нужно подключать UI.

Можно нескромный вопрос? А зачем?

Ну какбы хочу понять/разобраться почему чтобы сделать элементарный drag & drop на jQuery нужно подключить тонну кода UI, а не сделать это просто как на чистом JavaScript.

Реально не понимаю почему не работает вышеприведенный код, буду раз если разьясните

Не до конца jQuery используете.. Не понимаю зачем вообще на jQuery переписывать, если он и так минимален? Меньше он не станет...

ЗЫ У Объекта Document нет методов mouseup, mousemove... Ну и фаербаг вам в помощь.

Рабочий пример:

<script type="text/javascript">
window.onload = function() {
   var x = 0, drag = 0, elem = document.getElementById('move');

   elem.onmousedown = function(event){
      event = event || window.event;
      x = event.clientX+document.body.scrollLeft-parseInt(elem.style.left);
      drag = true;
   };

   elem.ondragstart = function() {
      return false;
   };

   document.onmouseup = function() {
      drag = false;
   };

   document.onmousemove = function(event) {
   event = event || window.event;
      if(drag){
      elem.style.left = event.clientX+document.body.scrollLeft-x + "px";
      }
   };
};
</script>
<img src="http://www.linkexchanger.su/forum/download/file.php?avatar=2_1263474815.jpg" style="position:absolute; top:100; left:100;" id="move" />

Мне ради интереса, хочется знать почему не получается перевести вышепредставленный код на jQuery.

PS: Document c обработчиками событий дружит прекрасно и firebag, это не считает за ошибку

Метод onmousemove есть, а mousemove?

в каком смысле? jQuery mousemove()

Вроде бы разобрался