0

var cat = document.getElementById('cat');
var mouse = document.getElementById('mouse');

/*-----Cat-----*/

cat.onmousedown = function(c) {

  var coordsCat = getCoords(cat);
  var shiftXCat = c.pageX - coordsCat.left;
  var shiftYCat = c.pageY - coordsCat.top;

  cat.style.position = 'absolute';
  document.body.appendChild(cat);
  moveAt(c);

  cat.style.zIndex = 1000;

  function moveAt(c) {
    cat.style.left = c.pageX - shiftXCat + 'px';
    cat.style.top = c.pageY - shiftYCat + 'px';
  }

  document.onmousemove = function(c) {
    moveAt(c);
  };

  cat.onmouseup = function() {
    document.onmousemove = null;
    cat.onmouseup = null;
  };

}

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

function getCoords(elem) {
  var boxСat = elem.getBoundingClientRect();
  return {
    top: boxСat.top + pageYOffset,
    left: boxСat.left + pageXOffset
  };
}

/*-----mouse-----*/

mouse.onmousedown = function(m) {

  var coordsMouse = getCoords(mouse);
  var shiftXMouse = m.pageX - coordsMouse.left;
  var shiftYMouse = m.pageY - coordsMouse.top;

  mouse.style.position = 'absolute';
  document.body.appendChild(Mouse);
  moveAt(m);

  mouse.style.zIndex = 1000;

  function moveAt(m) {
    mouse.style.left = m.pageX - shiftXMouse + 'px';
    mouse.style.top = m.pageY - shiftYMouse + 'px';
  }

  document.onmousemove = function(m) {
    moveAt(m);
  };

  mouse.onmouseup = function() {
    document.onmousemove = null;
    mouse.onmouseup = null;
  };

}

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

function getCoords(elem) {
  var boxMouse = elem.getBoundingClientRect();
  return {
    top: boxMouse.top + pageYOffset,
    left: boxMouse.left + pageXOffset
  };
}
.cat {
width: 40px;
height: 40px;
cursor: pointer;
left: 20px; 
top: 20px;
z-index: 0;
}

.mouse {
width: 25px;
height: 25px;
cursor: pointer;
left: 60px; 
top: 60px;
z-index: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Соловьев ПР7</title>
	<link rel="stylesheet" href="css/cat.css">
</head>
<body>
	<img src="img/cat.jpg" id="cat" class="cat">
	<img src="img/mouse.png" id="mouse" class="mouse">
	<script src="js/cat.js"></script>
</body>
</html>

1 ответ 1

1

https://jsfiddle.net/r8h8qo1v/

А вообще в строке

 document.body.appendChild(Mouse);

Mouse

надо написать как

mouse

P.S. у тебя очень много похожего кода - лично я бы сделал бы 1 универсальную функцию, в которую передавал бы разные сведения для разных объектов, типа

ActivateObject({
    id: 'cat',
    start_x: 10,
    start_y: 20,
});

ActivateObject({
    id: 'mouse',
    start_x: 60,
    start_y: 20,
});

это позволило бы некоторых ошибок copy-paste избежать

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.