0

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

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

谁能帮我实现这个？我不知道该怎么做。非常感谢。

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

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

1 回答 1

2

如果您的应用程序将使用大量 JS，我建议使用 javascript 库。它们提供了接口和 API 层，以降低实现 JS 繁重应用程序的复杂性。我更喜欢jquery，但那里还有更多的库。

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

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

编辑

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

于 2011-04-01T11:14:51.840 回答