Основы Drag'n'Drop

Zzz_ · January 11, 2013

В общем вот урок, http://learn.javascript.ru/drag-and-drop

Почему я открыл код в отдельном файле, а он не работает?


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body style="position: relative;">

<img src="http://learn.javascript.ru//files/tutorial/browser/events/ball.gif" style="cursor: pointer; position: absolute; z-index: 1000; left: 429px; top: 1640px;" width="50" height="50" id="ball"/>
<script>
var ball = document.getElementById('ball');
ball.onmousedown = function(e) { // отследить нажатие
  var self = this;
  e = fixEvent(e);
  // подготовить к перемещению
  // разместить на том же месте, но в абсолютных координатах
  this.style.position = 'absolute';
  moveAt(e);
  // переместим в body, чтобы мяч был точно не внутри position:relative
  document.body.appendChild(this);
  this.style.zIndex = 1000; // показывать мяч над другими элементами

  // передвинуть мяч под координаты курсора  
  function moveAt(e) {
    self.style.left = e.pageX-25+'px'; // 25 - половина ширины/высоты мяча
    self.style.top = e.pageY-25+'px';
   }
  // перемещать по экрану
  document.onmousemove = function(e) {
    e = fixEvent(e);
    moveAt(e);
  }
  // отследить окончание переноса
  this.onmouseup = function() {
    document.onmousemove = self.onmouseup = null;
  }
}
</script>
</body>
</html>

Zzz_ · January 11, 2013

Сам разобрался, здесь fixEvent, функции нету.

Так работает:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body style="position: relative;">

<img src="http://learn.javascript.ru//files/tutorial/browser/events/ball.gif" style="cursor: pointer; position: absolute; z-index: 1000; left: 429px; top: 1640px;" width="50" height="50" id="ball"/>
<script>
function fixEvent(e, _this) {
  e = e || window.event;
  if (!e.currentTarget) e.currentTarget = _this;
  if (!e.target) e.target = e.srcElement;
  if (!e.relatedTarget) {
    if (e.type == 'mouseover') e.relatedTarget = e.fromElement;
    if (e.type == 'mouseout') e.relatedTarget = e.toElement;
  }

  if (e.pageX == null && e.clientX != null ) {
    var html = document.documentElement;
    var body = document.body;
    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
    e.pageX -= html.clientLeft || 0;
    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
    e.pageY -= html.clientTop || 0;
  }
  if (!e.which && e.button) {
    e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : (e.button & 4 ? 2 : 0) );
  }
  return e;
}
//
var ball = document.getElementById('ball');
ball.onmousedown = function(e) {
  var self = this;
  e = fixEvent(e);
  this.style.position = 'absolute';
  moveAt(e);
  document.body.appendChild(this);
  this.style.zIndex = 1000;

  function moveAt(e) {
    self.style.left = e.pageX-25+'px';
    self.style.top = e.pageY-25+'px';
   }
  document.onmousemove = function(e) {
    e = fixEvent(e);
    moveAt(e);
  }
  this.onmouseup = function() {
    document.onmousemove = self.onmouseup = null;
  }
}
ball.ondragstart = function() {
  return false;
};
</script>
</body>
</html>

Sign In

Основы Drag'n'Drop

Question

Zzz_

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Zzz_

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information