Drag and Drop

Mo1k

Mitglied
Hallo,

ich bin schon seit geraumer Zeit auf der suche nach einem Drag and Drop Script / Tutorial und ich hoffe ihr könnt mir dabei helfen.Hier ein Beispiel, wie ich es mir vorstelle :

Man klickt einmal auf ein Bild ( 20*20 Pixel groß ), und hat es dann am Mauszeiger ( man muss die Maus nicht gedrückt halten ) dann habe ich eine Tabelle mit zb 20 Feldern ala 20*20 Pixel . Nun soll , wenn ich mit der Maus über die Tabelle gehe und nochmal klicke, das Bild in das am nächstgelegene Feld einrasten.

Hier habe ich noch ein Beispiel im Internet gefunden ( Ist halt nicht mit einer großen Tabelle , sondern mit einzelnen Feldern ) :

http://www.buffed.de/charplaner/?show=planer#equipment-armor

Mfg Mo1k

PS: Ein Tutorial wäre nicht schlecht, aber ein Script, dass ich auseinandernehmen kann und daraus lernen kann , ist auch nicht schlecht.
 
Hi,

hier findest du ein Tutorial, das sich mit dem Thema beschäftigt - allerdings in englischer Sprache.

Ciao
Quaese
 
ist schonmal ned schlecht XD

aber da muss man überall die Maustaste gedrückt halten , und ich bräuchte es halt ohne dieses gedrückthalten.

Mfg Mo1k
 
Hi,

du kannst doch die Mausereignisse entsprechend anpassen. Das Draggen beginnt beim Klicken auf das Objekt, wird erneut geklickt, wird gedroppt.

Mit den Funktionen aus dem Tutorials könnte das wie folgt aussehen:
Code:
// Ausgangscode: Mark Kahn (http://www.jslibrary.org)
// Quelle: http://www.webreference.com/programming/javascript/mk/column2/

function mouseUp(){
  //dragObject = null;
}

function makeDraggable(item){
  if(!item) return;
  item.onclick = function(ev){
    if(dragObject!=null){
      dragObject = null;
      return false;
    }

    dragObject  = this;
    mouseOffset = getMouseOffset(this, ev);
    return false;
  }
}
Ciao
Quaese
 
Zurück