Erik: Drag & Drop mit mehreren Ablagepunkten

SELF-Forum

Drag & Drop mit mehreren Ablagepunkten

Erik
– Informationen zu den Bewertungsregeln

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&amp;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&amp;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!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Drag & Drop mit mehreren Ablagepunkten

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    da hilft dir zwar nicht bei deiner eigentlichen frage, aber wenn du das rad nicht neu erfinden willst, hilft dir das ggf weiter

    http://ui.jquery.com/demos/sortable

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Drag & Drop mit mehreren Ablagepunkten

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Erik:

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

    Das hilft dir zwar auch nicht bei deiner eigentlichen Frage, aber dafür kannst du kürzer (und dadurch übersichtlicher) schreiben:

    this.e = e || window.event;  
this.x = e.pageX || e.clientX;  
this.y = e.pageY || e.clientY;  
this.target = e.target || e.srcElement;

    Live long and prosper,
    Gunnar

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln