javascript - 拖放并定位到放置的坐标-6ren

javascript - 拖放并定位到放置的坐标

转载作者：行者123 更新时间：2023-11-28 13:14:40

25

4

我需要将产品列表中的元素拖放到空白容器中。当用户完成拖放后，我必须将位置和使用过的元素存储到数据库中，以便我可以再次显示此配置。

不幸的是，我的问题很早就出现了。我成功地将元素从列表拖放到容器中，但不幸的是它们以表格形式显示，而不是我分配给它们的坐标

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShoppingCart.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var srcElement;

        $(document).ready(function () {

            $("div .product").each(function () {
                this.addEventListener('dragstart', OnDragStart, false);
            });

            $("div .bag").each(function () {
                this.addEventListener('dragenter', OnDragEnter, false);
                this.addEventListener('dragleave', OnDragLeave, false);
                this.addEventListener('dragover', OnDragOver, false);
                this.addEventListener('drop', OnDrop, false);
                this.addEventListener('dragend', OnDragEnd, false);
            });

        })

        function OnDragStart(event) {
            srcElement = this;

        }

        function OnDragOver(e) {
            e.preventDefault();


            return false;
        }

        function OnDragEnter(e) {
            e.preventDefault();
        }

        function OnDragLeave(e) {
            e.preventDefault();
        }

        function OnDrop(e) {
            e.preventDefault();

            var dm = srcElement.cloneNode(true);

            dm.style.Left = e.offsetX;
            dm.style.Top = e.offsetY;
            dm.style.position = "absolute";

            //$(this).append(srcElement);
            e.target.appendChild(dm); 

            e.stopPropagation();
            return false;
        }

        function OnDragEnd(e) {
            e.preventDefault();
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table >
                <tr>
                    <td>
                        <div draggable="true" id="div1" class="product">
                            <header>Rieker Trekkingsandalen braun</header>
                            <img src="images/monitor.jpg" style="height: 150px; width: 150px;" />
                        </div>
                    </td>
                    <td>
                        <div id="div2" class="product" draggable="true">
                            <header>Rieker Trekkingsandalen braun</header>
                            <img src="images/Cart.jpg" style="height: 150px; width: 150px;" />
                        </div>
                    </td>
                    <td>
                        <div id="div3" class="product" draggable="true">
                            <header>Rieker Trekkingsandalen braun</header>
                            <img src="images/mouse.jpg" style="height: 150px; width: 150px;" />
                        </div>
                    </td>
                    <td>
                        <div id="div4" class="product" draggable="true">
                            <header>Rieker Trekkingsandalen braun</header>
                            <img src="images/speaker.jpg" style="height: 150px; width: 150px;" />
                        </div>
                    </td>
                </tr>
            </table>

            <div class="bag">
            </div>
        </div>
    </form>
</body>
</html>

.product {
    height: 300px;
    width: 150px;
    border: 2px solid #666666;
    background-color: white;
    text-align: center;
    cursor: move;
}
.bag {
    background-color: green;
    height: 500px;
    width: 500px;
    position: absolute;
}

谁能指出我这里的问题？

干杯，斯特凡

最佳答案

dm.style.position = "absolut";

应该是

dm.style.position = "absolute";

关于javascript - 拖放并定位到放置的坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15136114/

25

4

0

文章推荐： javascript - 将对象转换为整数类型的数组并对值求和

文章推荐： javascript - jquery append 到表id而不是表内部

文章推荐： CSS - 主要内容有图案，子元素需要透明

文章推荐： swift - 我可以在 launchImage 消失后淡出它吗？

jquery - 使用 Kendo 拖/放创建多选元素
我在这里有一个我想要做的事情的例子:http://jsbin.com/OwoYAlEQ/1/edit 这是我的 HTML: person one person two person three per
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl
WPF ListView 数据绑定(bind)拖/放自动滚动
我一直在使用 Bea 的解决方案 here一段时间后发现它非常有帮助。现在我遇到的问题是，当我将项目拖放到另一个 ListView 控件中或拖放到另一个 ListView 控件中，并且我想在拖动“期间
python - pyqt QTreeWidget setItemWidget 拖/放后消失
我试图在使用 QTreeWidget.setItemWidget() 重新父级(拖放)后将小部件放入 QTreeWidgetItem 但是，如果编译以下代码，结果是 QTreeWidgetItem 内
javascript - 拖/放问题(可拖动到位置 :relative parent)
这是场景，我使用的是prototype和scriptaculous，但我相信jquery也会有同样的问题。我在相对定位的 div 中有一个可拖动图像的列表。问题是我无法将图像拖出父 div...好吧.
带有表格主体/行扭曲宽度的 Angular CDK 拖/放列表(无 Material )
我正在使用一个普通(Bootstrap)表，我想在其中包含可排序的行。我正在使用 Angular CDK (DragDropModule) 来实现排序/排序。但是，当拖动行时，它会扭曲宽度，因为 cd
swift - 如何在 UICollectionView 拖/放过程中删除 'ghost' 单元格，并使移动单元格不透明？
我正在尝试在我的 UICollectionView 中实现拖放机制，这与在快捷方式应用程序中重新排序快捷方式的组件非常相似。截至目前，行为是当您开始拖动时，会留下一个透明的单元格 View ，而另一
Jquery UI 拖/放，一个 div 可以工作，另一个则不能。怎么修？
我有以下 Jquery UI 拖放 jsfiddle https://jsfiddle.net/zoojsfiddle/ud96jdcp/ 具有
javascript - 使用 Jquery 创建基于 Web 的 "bulletin board pin map"；拖/放/碰撞/等
我希望创建一个基于网络的“公告板”，可以这么说，用户可以在其中创建/删除/拖放“图钉”，而不允许重叠“图钉”。这是一个图表，应该有助于说明我正在尝试创建的内容: 'pins' 可能已创建双击；他们会

首页

博学

6Ren·AI

商城

javascript - 拖放并定位到放置的坐标