Drag and drop add to cart function_问答_开发者

开发者 https://www.devze.com 2023-02-21 01:44 出处：网络

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