Есть сайт, на котором расположено меню со стрелками. Мне необходимо чтобы при передвижении стрелок, появлялись новые. Не хочу использовать jquery UI. А как реализовать на javascript не знаю....помогите
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/proverka.css">
</head>
<body>
<div>
<ul>
<li style="list-style-type: none;"><img src="images/вверх.png" width="40px" height="50px" align="center" class="str1 draggable"></li>
<br>
<li style="list-style-type: none;"><img src="images/лево.png" width="50px" height="40px" align="center" class="str2 draggable"></li>
<br>
<li style="list-style-type: none;"><img src="images/вниз.png" width="40px" height="50px" align="center" class="str3 draggable"></li>
<br>
<li style="list-style-type: none;"><img src="images/право.png" width="50px" height="40px" align="center" class="str4 draggable"></li>
</ul>
</div>
<script src="js/proverka.js"></script>
</body>
</html>
document.onmousedown = function(e) {
var dragElement = e.target;
if (!dragElement.classList.contains('draggable')) return;
var coords, shiftX, shiftY;
startDrag(e.clientX, e.clientY);
document.onmousemove = function(e) {
moveAt(e.clientX, e.clientY);
};
dragElement.onmouseup = function() {
finishDrag();
};
// -------------------------
function startDrag(clientX, clientY) {
shiftX = clientX - dragElement.getBoundingClientRect().left;
shiftY = clientY - dragElement.getBoundingClientRect().top;
dragElement.style.position = 'fixed';
document.body.appendChild(dragElement);
moveAt(clientX, clientY);
}
function finishDrag() {
dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px';
dragElement.style.position = 'absolute';
document.onmousemove = null;
dragElement.onmouseup = null;
}
function moveAt(clientX, clientY) {
var newX = clientX - shiftX;
var newY = clientY - shiftY;
var newBottom = newY + dragElement.offsetHeight;
if (newBottom > document.documentElement.clientHeight) {
var docBottom = document.documentElement.getBoundingClientRect().bottom;
var scrollY = Math.min(docBottom - newBottom, 10);
if (scrollY < 0) scrollY = 0;
window.scrollBy(0, scrollY);
newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
}
if (newY < 0) {
var scrollY = Math.min(-newY, 10);
if (scrollY < 0) scrollY = 0;
window.scrollBy(0, -scrollY);
newY = Math.max(newY, 0);
}
if (newX < 0) newX = 0;
if (newX > document.documentElement.clientWidth - dragElement.offsetHeight) {
newX = document.documentElement.clientWidth - dragElement.offsetHeight;
}
dragElement.style.left = newX + 'px';
dragElement.style.top = newY + 'px';
}
return false;
}
