Я тестирую несколько новых дизайнов для своего веб-сайта и решил попробовать добавить функцию «добавить и перенести» на свой сайт.По сути, я хочу, чтобы пользователь мог перетаскивать изображение элемента в верхний правый угол экрана (возможно, в поле «position: fixed»?), А затем отбрасывать этот элемент внутри квадрата, чтобы добавить его кПользователи корзину.
Простая идея, но я не видел ее раньше.
Может кто-нибудь помочь мне реализовать это?Я не уверен, как это сделать.Большое спасибо.
Пока моя работа выглядит следующим образом:
<html>
<head>
<link rel="stylesheet" type="text/css" href="drag.css" />
<script type="text/javascript">
function setupEvents( ) {
document.getElementById('picture').onmousedown = enableDragging;
}
function enableDragging( ) {
document.onmousemove = dragElement;
document.onmouseup = disableDragging;
return false;
}
function dragElement(evt) {
document.getElementById('picture').style.left = evt.clientX;
document.getElementById('picture').style.top = evt.clientY;
return false;
}
function disableDragging( ) {
document.onmousemove = null;
document.onmouseup = null;
}
</script>
</head>
<body onload="setupEvents( )">
<div>
<p><img src="picture.png" alt="picture" id="picture" /></p>
</div>
</body>
</html>