Drag & Drop mit Javascript

[MaWe]

Hallo,

ich programmiere ein Browsergame, genauer einen Fussballmanager(ja ich weis den zig Millionsten).

Ich bin da gerade am Taktikbildschirm und möchte meine Spieler die auf der Bank sitzen per Drag&Drop aufs Spielfeld verschieben.

Im Netz hab ich folgenden Code dazu gefunden:

<script type='text/javascript'>
var DragHandler = {

// private property.
 _oElem : null,

// public method. Attach drag handler to an element.
 attach : function(oElem) {
  oElem.onmousedown = DragHandler._dragBegin;

// callbacks
  oElem.dragBegin = new Function();
  oElem.drag = new Function();
  oElem.dragEnd = new Function();

return oElem;
 },

// private method. Begin drag process.
 _dragBegin : function(e) {
  var oElem = DragHandler._oElem = this;

if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
  if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

var x = parseInt(oElem.style.left);
  var y = parseInt(oElem.style.top);

e = e ? e : window.event;
  oElem.mouseX = e.clientX;
  oElem.mouseY = e.clientY;

oElem.dragBegin(oElem, x, y);

document.onmousemove = DragHandler._drag;
  document.onmouseup = DragHandler._dragEnd;
  return false;
 },

// private method. Drag (move) element.
 _drag : function(e) {
  var oElem = DragHandler._oElem;

var x = parseInt(oElem.style.left);
  var y = parseInt(oElem.style.top);

e = e ? e : window.event;
  oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
  oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';

oElem.mouseX = e.clientX;
  oElem.mouseY = e.clientY;

oElem.drag(oElem, x, y);

return false;
 },

// private method. Stop drag process.
 _dragEnd : function() {
  var oElem = DragHandler._oElem;

var x = parseInt(oElem.style.left);
  var y = parseInt(oElem.style.top);

oElem.dragEnd(oElem, x, y);

document.onmousemove = null;
  document.onmouseup = null;
  DragHandler._oElem = null;
 }

};
</script>

<script type='text/javascript'>

function begin (element, x, y) {
  var s = '#' + element.id + ' (begin drag)' + ' x:' + x + ', y:' + y;
  updateInfo(s);
 }

function drag (element, x, y) {
  var s = '#' + element.id + ' (dragging)' + ' x:' + x + ', y:' + y;
  updateInfo(s);
 }

function end (element, x, y) {
  var s = '#' + element.id + ' (end drag)' + ' x:' + x + ', y:' + y;
  updateInfo(s);
 }

function updateInfo(s) {
  document.getElementById('info').innerHTML = s;
 }
 var dragable1 = DragHandler.attach(document.getElementById('dragable1'));
 var dragable2 = DragHandler.attach(document.getElementById('dragable2'));
 var dragable3 = DragHandler.attach(document.getElementById('dragable3'));
 var dragable4 = DragHandler.attach(document.getElementById('dragable4'));
 var dragable5 = DragHandler.attach(document.getElementById('dragable5'));
 var dragable6 = DragHandler.attach(document.getElementById('dragable6'));
 var dragable7 = DragHandler.attach(document.getElementById('dragable7'));
 var dragable8 = DragHandler.attach(document.getElementById('dragable8'));

dragable1.dragBegin = begin;
 dragable1.drag = drag;
 dragable1.dragEnd = end;

dragable2.dragBegin = begin;
 dragable2.drag = drag;
 dragable2.dragEnd = end;

dragable3.dragBegin = begin;
 dragable3.drag = drag;
 dragable3.dragEnd = end;

dragable4.dragBegin = begin;
 dragable4.drag = drag;
 dragable4.dragEnd = end;

dragable5.dragBegin = begin;
 dragable5.drag = drag;
 dragable5.dragEnd = end;

dragable6.dragBegin = begin;
 dragable6.drag = drag;
 dragable6.dragEnd = end;

dragable7.dragBegin = begin;
 dragable7.drag = drag;
 dragable7.dragEnd = end;

dragable8.dragBegin = begin;
 dragable8.drag = drag;
 dragable8.dragEnd = end;

</script>

Jetz  brauch ich im Body nurnoch irgendwo die entsprechenden divs und kann die dann verschieben.

Soweit so gut, aber: Ich kann die aufm ganzen Bildschirm verschieben!
Ich will die aber nur auf dem Spielfeld verschieben können, was ein img ist.
Sobald die beim Verschieben das Spielfeld verlassen sollen die fest auf der Bank verankert werden. wenn ich wieder übers Spielfeld geh sollen sie wieder aufm Spielfeld verschiebbar sein.

Kann mir jemand sagen was ich da ändern muss damit ich dieses Verhalten drin hab?

[suit]

Kann mir jemand sagen was ich da ändern muss damit ich dieses Verhalten drin hab?

versuchs mal mit diesem beispiel hier, das ding ist einfacher verständlich
http://aktuell.de.selfhtml.org/artikel/dhtml/draganddrop/index.htm

was du tun musst:

du musst nur abfragen wo die position des elements gerade ist - wenn die position großer oder kleiner ist als deine vorgegeben grenze musst du das drag-event beenden oder einfach die werte nicht mehr hoch bzw runterzählen

[MaWe]

Cool danke :)

Aber jetzt hab ich doch noch ein Problem:

ich brauch die Position die ein Div - welches ich verschiebe - auf einem img  - welches sich an Position X/Y befindet - hat.

Also brauch ich die absolute position des img und muss die des divs abziehen, aber wie komm ich an die absolute position des img?

[steckl]

Hi,

Also brauch ich die absolute position des img und muss die des divs abziehen, aber wie komm ich an die absolute position des img?

Mit offsetLeft und offsetTop.
Eventuell musst du dich noch etwas im DOM-Tree nach oben durchhangeln.

mfG,
steckl

PS:
Hier ist noch ein Link zu einem etwas komplexeren Drag&Drop-Skript.

[MaWe]

OK, die absolute Position bekomm ich jetzt, Auch die relative vom div zum img :)
Danke :)

Jetzt muss ich dem DIV aber noch ein Left und ein Top zuweisen und es auch da platzieren wo ich es haben möchte.
Da sich diese Position je nach Theme(ich bau das alles auf phpFusion auf) ändert, möchte ich es einfach direkt auf dem img platzieren.

Allerdings kann ich ja am Anfang die Positionen nicht setzen weil ich die nicht kenne.
Momentan ist das div ganz links oben weil ich am Anfang für Top und Left den Wert 0px setze.

[steckl]

Hi,

Jetzt muss ich dem DIV aber noch ein Left und ein Top zuweisen und es auch da platzieren wo ich es haben möchte.
Da sich diese Position je nach Theme(ich bau das alles auf phpFusion auf) ändert, möchte ich es einfach direkt auf dem img platzieren.

Allerdings kann ich ja am Anfang die Positionen nicht setzen weil ich die nicht kenne.
Momentan ist das div ganz links oben weil ich am Anfang für Top und Left den Wert 0px setze.

Du könntest ein DIV nehmen, dem du das Spielfeld als Hintergund-Grafik gibst.
Anschließend kannst du darin die DIVs für die einzelnen Spieler anzeigen.
Ich glaube für das positionieren würde sich position: relative am besten eignen.

Hoffe ich habe dein Problem richtig verstanden.

mfG,
steckl