I am looking to create a drag-and-drop feature for moving items from a list of products to an empty container. Upon completion, I need to save the location and the selected items in a database so that I can recall this layout later.
However, I have encountered a hurdle early on in the process. I have been able to successfully drag and drop items from the list to the container, but they are not displaying at the coordinates I specified; instead, they appear in a tabular format.
<%@ 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;
}
Can someone assist me with identifying the issue here?
Cheers, Stefan