Question

我正在为我的网站测试一些新的设计，并决定尝试运行一些拖放添加到我的网站的购物车功能。基本上我想要的是用户能够将项目的图片拖动到屏幕的右上角（可能是“位置：固定”框？）然后将此项目放在正方形中将其添加到用户购物车。

一个简单的想法，但我以前没见过。

任何人都可以帮我实现吗？我不知道该怎么做。非常感谢。

到目前为止，我的工作如下：

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

Answer 1

如果您的应用程序将变得很重，我推荐使用javascript库。它们提供了接口和API层，降低了实施JS重型应用程序的复杂性。我更喜欢jquery，但there are many more libraries out there。

您正在寻找的功能在jQueryUI项目中作为一个小部件提供：http://jqueryui.com/demos/droppable/

有些人可能会觉得我推荐一个框架令人反感，但它会让你更快地完成工作。

编辑

在设置演示所需的文件上查看此示例：http://jsbin.com/ejolo6

拖放添加到购物车功能

1 个答案: