Bildausschnitt verschieben

[Shaguar]

Hallo zusammen,
 also wo fang ich an....
Ich habe ein div, sagen wir mal 500x500 Pixel gross. In diesem div liegt ein Bild mit den Maßen 2000x1600. Der Overflow des divs ist auf hidden gestellt, also sieht man nur die oberen 500x500 Pixel des Bildes.
Der Ausschnitt soll auch nicht grösser werden wie er von Anfang an ist, was ich jetzt machen will ist wenn ich mit der Maus in dieses div fahre und dann die Maustaste gedrückt halte, das ich dann das Bild in dieses Div verschieben kann. So das ich durch das Verschieben mit der Maus immer einen anderen Bereich des Bildes sehen kann.
Dann sollen dazu noch die Koordinaten gespeichert werden um wieviel das Bild vom Ursprungs-Ort (0,0) verschoben wurde.

Ich hoffe die Problematik wurde einigermaßen klar. Wenn nicht beantwortet ich gerne noch weitere Fragen.

[Struppi]

Der Ausschnitt soll auch nicht grösser werden wie er von Anfang an ist, was ich jetzt machen will ist wenn ich mit der Maus in dieses div fahre und dann die Maustaste gedrückt halte, das ich dann das Bild in dieses Div verschieben kann. So das ich durch das Verschieben mit der Maus immer einen anderen Bereich des Bildes sehen kann.

Du brauchst ein Drag&Drop Skript, ich kann dir eines anbieten http://javascript.jstruebig.de/javascript/67/

Dann sollen dazu noch die Koordinaten gespeichert werden um wieviel das Bild vom Ursprungs-Ort (0,0) verschoben wurde.

Dass musst du dann selber machen, dazu kannst in dem Code mit onstart, ondrag, ondrop eine eigene Funktion einbinden.

Struppi.

[Shaguar]

Du brauchst ein Drag&Drop Skript, ich kann dir eines anbieten http://javascript.jstruebig.de/javascript/67/

Ok das funktioniert schon mal wunderbar, aber eine Frage: Wie kann ich bei diesem Drag'n'Drop Script Grenzen festlegen. Also so das ich das Drag Objekt nicht überall hinziehen kann sondern nur in einem vordefinierten Bereich.

Dass musst du dann selber machen, dazu kannst in dem Code mit onstart, ondrag, ondrop eine eigene Funktion einbinden.

Hab ich schon einigermaßen hinbekommen.

[Shaguar]

Oder anders gesagt:
Mit getPos kann ich ja die aktuelle Position des Drag Objektes abfragen. Anfangs hat das Objekt die Position (0,0) und man soll es nicht in den negativen Bereich ziehen können oder in einen Bereich der grösser ist als das Bild selbst.

Sry für doppelpost

[Struppi]

Oder anders gesagt:
Mit getPos kann ich ja die aktuelle Position des Drag Objektes abfragen. Anfangs hat das Objekt die Position (0,0) und man soll es nicht in den negativen Bereich ziehen können oder in einen Bereich der grösser ist als das Bild selbst.

Wenn die ondrag Funktion mit return false beendet wird. Also, wenn position < 0 return false.

Struppi.

[Shaguar]

Wenn die ondrag Funktion mit return false beendet wird. Also, wenn position < 0 return false.

hm und wie baue ich das da ein? Ich blick bei dem Skript noch nicht ganz durch.
Danke für die Hilfe.

[Struppi]

Wenn die ondrag Funktion mit return false beendet wird. Also, wenn position < 0 return false.

hm und wie baue ich das da ein? Ich blick bei dem Skript noch nicht ganz durch.
Danke für die Hilfe.

in etwa so:

[obj].ondrag = function(e) {  
var pos = this.getPos();  
if(pos[0] < 0) return false;  
}

Struppi.

[Shaguar]

in etwa so:

[obj].ondrag = function(e) {

var pos = this.getPos();
if(pos[0] < 0) return false;
}

  
Also ich hab das so implementiert:  
  
<script language="javascript">  
  
var test = new DragObject( document.getElementById('ImgBig') );  
  
test.ondrag = function(e) {  
var pos = this.getPos();  
if(pos[0] < 0) return false;  
}  
</script>  
  
Da gibt es jetzt 2 Probleme.  
Wenn ich jetzt über die Position (0,0) "hinausdragge" dann bricht er das draggen sofort ab und das Bild ist dann auch nicht mehr drag-fähig danach.  
Ist es irgendwie möglich das man es erst gar nicht über diese Grenze hinausschieben kann, also das man sozusagen nur dann die Grenzen stösst und man im Draggen nicht unterbrochen wird. Wenn das gehen würde dann wär auch das zweite Problem gleich gelöst. (Das man nach dem überschreiten der Grenzen, anschliesend weiter-draggen kann).  

[Struppi]

Da gibt es jetzt 2 Probleme.
Wenn ich jetzt über die Position (0,0) "hinausdragge" dann bricht er das draggen sofort ab und das Bild ist dann auch nicht mehr drag-fähig danach.

Jaja, tut mir leid, mir ist das mittlerweile auch aufgefallen, dass Skript ist für solche Sachen einfach (noch) nicht ausgelegt. man müßte die Dragfunktion anpassen...

Ist es irgendwie möglich das man es erst gar nicht über diese Grenze hinausschieben kann, also das man sozusagen nur dann die Grenzen stösst und man im Draggen nicht unterbrochen wird. Wenn das gehen würde dann wär auch das zweite Problem gleich gelöst. (Das man nach dem überschreiten der Grenzen, anschliesend weiter-draggen kann).

Möglich auf jeden Fall, ich habe vorhin mal eine Lösung gebaut, die aber leider auch nicht perfekt ist und zwar müßtest du eine Funktion in dem Modul anpassen:

this.move = function(e)  
{  
  var evt_pos = getEvtPos(e);  
  var pos = this.getPos();  
  this.setPos( (evt_pos[0] + start_pos[0]), (evt_pos[1] + start_pos[1]) );  
  if( this.ondrag(e) == false) this.setPos( pos[0], pos[1]);  
};  

Ich befürchte das ist aber auch keine optimale Lösung.

Struppi.