Drag and drop add to cart function
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>
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
加载中,请稍侯......
精彩评论