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?