Home/ Questions/Q 4250718
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T04:33:57+00:00

I am testing out some new designs for my website and have decided to

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0