img dragn-drop Randberechnung mit Zoomfaktor...

[Paykoman]

Hallo,

ich sitze da jetzt schon etliche Stunden an dem Problem komme aber nicht dahinter wo der Fehler ist, bzw. wie ichs mathematisch lösen kann.
Ich will im Grunde das man ein Bild mittels css-zoom und js-drag-drop nach Wunsch platzieren kann.

Solange der Zoom nicht genutzt wird funktioniert es auch, sobald der Zoom drinn ist lassen sich die untere und rechte Kante des Bildes nicht wirklich berechnen.

Hier eine Demo.

Ich habe mal ein Beispielbild geladen und meine Randbegrenzung eingeschalten, am besten den zoom auf max stellen dann wird man sehen das die Begrenzung viel zu früh anschlägt und die beiden Kanten nicht bis auf 0 geschoben werden können (untere Kante vom Bild == untere Kante-div und selbes Spiel mit der rechten Kante).
Der Zoom geht nur soweit bis mindestens eine Seite gleich groß ist wie die div.


Ab #65 kommt meine Begrenzung:

if( zoom < 1 ){
            var maxLeft = ( imgWidth*zoom <= cLeft ) ? 0 : parseInt((cLeft - (imgWidth*zoom) )),
                maxTop  = ( imgHeight*zoom <= cTop ) ? 0 : parseInt((cTop - (imgHeight*zoom)));
          }else{
            var maxLeft = parseInt(cLeft - imgWidth),
                maxTop  = parseInt(cTop - imgHeight);
          }

Hier wird die Größe mit dem Zoomfaktor neu berechnet und eben Berücksichtigt wie viel vom Bild mindestens zusehen sein soll.
Beispiel:

der container ist 164px also muss soviel vom Bild immer zusehen sein.
1073 * 0,25 = 268 (neue Breite des Bildes)
164 - 268 = -104 (das bild kann maximal left: -104px haben dann sollten beide rechten Ränder übereinander liegen).

Nun das ganze klappt aber halt nicht wäre echt toll wenn mir Jemand helfen könnte.
Sinn und Zweck ist das die Bildkanten (rechts/unten) nicht bis z.B. zur Mitte des Containers geschoben wäre können, die Grenze vom Container darf eben nicht überschritten werden.

LG: Paykoman