Помогите , почему onclick не работает второй раз , когда картинка уже вернулась на свое прежнее место.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="footer">
<img class="main" src="https://pp.userapi.com/c636420/v636420400/53845/hqChLSxGHXs.jpg" id="picture">
</div>
<script src="script.js"></script>
</body>
</html>
var draw = document.getElementById('picture');
draw.onclick = function() {
dragremove(draw , "main")
drag(draw , "drawing");
draw.onclick =function() {
drag(draw,"main");
dragremove(draw , "drawing");
};
}
function drag(obj , text) {
var end = false;
obj.classList.add(text);
}
function dragremove(obj , text) {
obj.classList.remove(text);
}
CSS код:
.footer img.main{
position: absolute;
width: 400px;
height: 350px;
top: 10px;
left: 10px;
cursor: pointer;
transition: all 3s;
}
.footer img.drawing{
top: 600px;
left: 600px;
position: absolute;
width: 40px;
height: 35px;
cursor: pointer;
transition: all 3s;
}