製品のリストから空白のコンテナーに項目をドラッグ アンド ドロップする必要があります。ユーザーがドラッグ アンド ドロップを終了したら、この構成を再度表示できるように、場所と使用済みアイテムをデータベースに保存する必要があります。
残念ながら、私の問題は早い段階で始まります。リストからコンテナに項目をドラッグ アンド ドロップすることに成功しましたが、残念ながら、割り当てた座標ではなく表形式で表示されます。
<%@ 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;
}
誰かがここで問題を指摘できますか?
乾杯、ステファン