nicht angemeldet
Drag&Drop and position at dropped coordinates
Der MartinI 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
-
Hello,
judging from your e-mail address I guess you're Austrian. So there's no point in posting in the world's mostfrequently used language, which is "bad English".
[...] unfortunately they are displayed in a tabular form and not at the coordinates I assign to them
Well, you do *not* assign any coordinates ...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShoppingCart.aspx.cs" Inherits="_Default" %>
This has nothing to do with your problem, which is a client-related one. So you'd better left that away to avoid confusion, and instead posted the pure client-side code.
<head runat="server">
This non-standard attribute, too, hopefully never appears at the client's side.
dm.style.Left = e.offsetX;
dm.style.Top = e.offsetY;What are you expecting from creating arbitrary properties within the style object? Maybe you meant the left and top properties, so name them correctly.
<form id="form1" runat="server">
Again: Irrelevant server-side code that only confuses people who aren't familiar with IIS techniques.
.product {
Oops, this suddenly looks like CSS code. Why don't you tag it adequately, as you did with the HTML code?
So long,
Martin--
Man ist so alt, wie man sich fühlt.
Aber niemals so wichtig.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hello,
judging from your e-mail address I guess you're Austrian. So there's no point in posting in the world's mostfrequently used language, which is "bad English".
[...] unfortunately they are displayed in a tabular form and not at the coordinates I assign to them
Well, you do *not* assign any coordinates ...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShoppingCart.aspx.cs" Inherits="_Default" %>
This has nothing to do with your problem, which is a client-related one. So you'd better left that away to avoid confusion, and instead posted the pure client-side code.
<head runat="server">
This non-standard attribute, too, hopefully never appears at the client's side.
dm.style.Left = e.offsetX;
dm.style.Top = e.offsetY;What are you expecting from creating arbitrary properties within the style object? Maybe you meant the left and top properties, so name them correctly.
<form id="form1" runat="server">
Again: Irrelevant server-side code that only confuses people who aren't familiar with IIS techniques.
.product {
Oops, this suddenly looks like CSS code. Why don't you tag it adequately, as you did with the HTML code?
So long,
MartinHi,
Danke für deine Antwort!Ich muss einen Produktkonfigurator entwicklen welcher es ermöglicht Produkte aus einer Liste auf einen Warenkorb zu ziehen und an der Stelle zu platzieren wo sie fallen gelassen wurden. Ein nachträgliches Verschieben, Entfernen oder Speichern der gesamten Konfiguration soll natürlich auch möglich sein.
Wie du vielleicht schon nach meinem Codereview vermutest ist dies mein erstes HTML-Projekt, deshalb sei nicht zu streng mit mir ;-)
LG Stefan
-