拖放添加到购物车功能
我正在测试我的网站的一些新设计，并决定尝试在我的网站上运行一些拖放添加到购物车功能。基本上我想要的是用户能够将项目的图片拖动到屏幕的右上角（也许是“位置：固定”框？），然后将该项目放在正方形内将其添加到用户购物车。
一个简单的想法，但我以前从未见过。
谁能帮我实现这个？我不知道该怎么做。多谢。
到目前为止我的工作如下：
<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>
I am testing out some new designs for my website and have decided to try and run a little drag and drop add to cart function to my site. Basically what I want is the user to be able to drag the picture of an item to the top right corner of the screen (to a 'position : fixed' box, perhaps?) and then dropping this item within the square adds it to the users cart.
A simple idea, but one I haven't seen before.
Can anyone help me to implement this ? I am not sure how to go about it. Thanks a lot.
So far my work is as follows :
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您的应用程序需要大量 JS，我建议使用 javascript 库。它们提供的接口和 API 层可降低实现 JS 密集型应用程序的复杂性。我更喜欢 jquery，但是 还有更多的库。
您正在寻找的功能可以在 jQueryUI 项目中作为小部件使用： http://jqueryui.com/demos/ droppable/
有些人可能会觉得我推荐一个框架令人反感，但它会让你更快地完成工作。
编辑
查看此示例，了解设置演示所需的文件：http://jsbin。 com/ejolo6
If your application is going to be JS heavy, I recommend using a javascript library. They provide interfaces and API layers that reduce the complexity in implementing JS heavy apps. I prefer jquery, but there are many more libraries out there.
The functionality you are looking for is available in the jQueryUI project as a widget : http://jqueryui.com/demos/droppable/
Some people might find it distasteful that I'm recommending a framework, but it will get the job done quicker for you.
EDIT
Have a look at this example on the files needed to setup a demo : http://jsbin.com/ejolo6