我正在测试我的网站的一些新设计，并决定尝试在我的网站上运行一些拖放添加到购物车功能。基本上我想要的是用户能够将某个项目的图片拖到屏幕的右上角(也许是“位置:固定”框？)，然后将该项目放在正方形内将其添加到用户购物车。
一个简单的想法，但我以前从未见过。
有人可以帮我实现这个吗？我不知道该怎么做。非常感谢。
到目前为止我的工作如下:
<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>
最佳答案
如果您的应用程序需要大量 JS，我建议使用 JavaScript 库。它们提供的接口(interface)和 API 层可降低实现 JS 密集型应用程序的复杂性。我更喜欢jquery ，但是there are many more libraries out there .
您正在寻找的功能可以在 jQueryUI 项目中作为小部件获得:http://jqueryui.com/demos/droppable/
有些人可能会觉得我推荐一个框架令人反感，但它会让你更快地完成工作。
编辑
查看此示例，了解设置演示所需的文件: http://jsbin.com/ejolo6
关于javascript - 拖放添加到购物车功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5512541/