nicht angemeldet
Hallo,
ich fall gleich mal mit der Tür ins Haus :
Es geht darum, dass ich Über Drag&Drop benutzer in eine Liste einfügen möchte, dabei jedoch keine Dopplungen auftreten sollen.
Das Drag&Drop funktioniert soweit. Das problem ist nun, herraus zu bekommen Über welches Element ich das gezogene Element ziehe.
Das Script soll anschließend Mit Ajax weiterverarbeitet werden und anschließend die Änderungen in eine Datenbank übernehmen.
Zum Testen hab ich eine einfache HTML-Seite gebastelt. Hier der Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Drag&Drop - Test</title>
<style type="text/css">
.drag{
border:1px solid black;
}
#drag1{
position:absolute;
z-index:200;
background: #00FF00;
color:#000000;
}
#drag2{
position:absolute;
z-index:200;
background:#33FFFF;
color:#000000;
}
#drag3{
position:absolute;
z-index:200;
background:#FF33FF;
color:#000000;
}
.drop{
position:absolute;
color:#CCCCCC;
border: 1px solid gray;
}
</style>
<script type="text/javascript">
var offsetX, offsetY;
function MouseEvent(e)
{
if (e)
{
this.e = e;
}else{
this.e = window.event;
}
if (e.pageX) {
this.x = e.pageX;
}else{
this.x = e.clientX;
}
if (e.pageY)
{
this.y = e.pageY;
}else{
this.y = e.clientY;
}
if (e.target)
{
this.target = e.target;
}else{
this.target = e.srcElement;
}
}
function handleDown(e,element)
{
var e = new MouseEvent(e, element);
addListener("mousemove", handleMove);
addListener("mouseup", handleUp)
var drag = document.getElementById(element);
offsetX = e.x - parseInt(drag.style.left);
offsetY = e.y - parseInt(drag.style.top);
document.getElementById("ziel").innerHTML = "";
}
function handleMove(e)
{
var e = new MouseEvent(e);
var x = e.x - offsetX;
e.target.style.left = x +"px";
var y = e.y - offsetY;
e.target.style.top = y + "px";
}
function handleUp(e,target)
{
var e = new MouseEvent(e);
removeListener("mousemove", handleMove);
removeListener("mouseup", handleUp);
var target = e.target;
var x = parseInt(target.style.left);
var y = parseInt(target.style.top);
var width = parseInt(target.style.width);
var height = parseInt(target.style.height);
if (e.x > x && e.x < x + width && e.y > y && e.y < y + height)
{
alert ("Drin isses!")
document.getElementById("ziel").innerHTML = "was 'n Ding";
}
}
function addListener(type, callback)
{
if (document.addEventListener)
{
document.addEventListener(type, callback, false);
}else if (document.attachEvent)
{
document.attachEvent("on" + type, callback, false);
}
}
function removeListener(type, callback)
{
if(document.removeEventListener)
{
document.removeEventListener(type, callback, false);
}else if (document.detachEvent)
{
document.detachEvent("on" + type, callback, false);
}
}
function welcherBereich(id)
{
document.getElementById("ziel").innerHTML = "Korb : "+id;
}
</script>
</head>
<body>
<h1>Drag&Drop - Test</h1>
<div id = "ziel"></div>
<div id="drag1" class="drag" style="left:200px; top:100px; width:50px; height:50px;" onMouseDown="handleDown(event, 'drag1');">testen1</div>
<div id="drag2" class="drag" style="left:200px; top:150px; width:50px; height:50px;" onMouseDown="handleDown(event, 'drag2');">testen2</div>
<div id="drag3" class="drag" style="left:200px; top:200px; width:50px; height:50px;" onMouseDown="handleDown(event, 'drag3');">testen3</div>
<div class="drop" id="drop1" style="left:200px; top:300px; width:100px; height:80px;" onMouseOver="welcherBereich(this.id);">Korb1</div>
<div class="drop" id="drop2" style="left:300px; top:300px; width:100px; height:80px;" onMouseOver="welcherBereich(this.id);">Korb2</div>
<div class="drop" id="drop3" style="left:400px; top:300px; width:100px; height:80px;" onMouseOver="welcherBereich(this.id);">Korb3</div>
<input type="hidden" id="zielbereich">
</body>
</html>
Wie komme ich nun an die Id, der entsprechenden "Drop-Box" ?
Vielen Dank für eure Hilfe!
Gunnar Bittersmann