stefan: Drag&Drop and position at dropped coordinates

Beitrag lesen

SELF-Forum

Drag&Drop and position at dropped coordinates

stefan
– Informationen zu den Bewertungsregeln

I need to drag and drop items from a list of products to a blank container. When the user finished drag&drop I have to store the location and the used items to db so that I can display this configuration again.
Unfortunately my problem begin in a early stage. I succeeded in dragging and dropping items from list to container but unfortunately they are displayed in a tabular form and not at the coordinates I assign to them

  
<%@ 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;  
  
}

Can anyone point me to the problem?

Cheers,
Stefan

Beitrag melden
–
Informationen zu den Bewertungsregeln