Jquery-draggable mit zoom-problem

Nahm sich viel Zeit und Mühe, um dieses Problem zu lösen, aber schließlich habe ich eine Lösung, die funktioniert.

Diese Lösung funktioniert sowohl für Firefox und IE. #Leinwand ist das div enthält ziehbar. Beachten Sie, dass wir müssen sicherstellen, dass die Elemente Aufenthalte im inneren der Leinwand manuell.

Dies funktioniert auch, wenn wenn die Leinwand hat eine andere zoom-Stufe als der rest der Seite.

var pointerX;
var pointerY;
$(c).draggable({
  start : function(evt, ui) {
    pointerY = (evt.pageY - $('#canvas').offset().top) / zoom - parseInt($(evt.target).css('top'));
    pointerX = (evt.pageX - $('#canvas').offset().left) / zoom - parseInt($(evt.target).css('left'));
  },
  drag : function(evt, ui) {
    var canvasTop = $('#canvas').offset().top;
    var canvasLeft = $('#canvas').offset().left;
    var canvasHeight = $('#canvas').height();
    var canvasWidth = $('#canvas').width();

    //Fix for zoom
    ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY); 
    ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX); 

    //Check if element is outside canvas
    if (ui.position.left < 0) ui.position.left = 0;
    if (ui.position.left + $(this).width() > canvasWidth) ui.position.left = canvasWidth - $(this).width();  
    if (ui.position.top < 0) ui.position.top = 0;
    if (ui.position.top + $(this).height() > canvasHeight) ui.position.top = canvasHeight - $(this).height();  

    //Finally, make sure offset aligns with position
    ui.offset.top = Math.round(ui.position.top + canvasTop);
    ui.offset.left = Math.round(ui.position.left + canvasLeft);
  }
});

InformationsquelleAutor torke1

Wenn CSS Zoom wird durchgeführt, der sich speziell auf die html-Körper, es ist eine sehr einfache Lösung, aber es bedeutet, müssen Sie ändern Sie die Quelle. Das ist ein no-go für einige, aber ich poste die Lösung hier auf jeden Fall.

Also die draggable-Funktionalität von jQuery UI Figuren aus der mouseposition mit einer Methode namens _generatePosition. Das problem ist, daß es sich nicht nehmen vergrößern berücksichtigen (duh), so wir nur haben, teilen Sie Ihr Ergebnis, indem Sie die zoom-Stufe und alles funktioniert.

So schalten Sie diese:

    return {
        top: (

            //The absolute mouse position
            pageY -

            //Click offset (relative to the element)
            this.offset.click.top -

            //Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.top -

            //The offsetParent's offset without borders (offset + border)
            this.offset.parent.top +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.top :
                ( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
        )/ ,
        left: (

            //The absolute mouse position
            pageX -

            //Click offset (relative to the element)
            this.offset.click.left -

            //Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.left -

            //The offsetParent's offset without borders (offset + border)
            this.offset.parent.left +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.left :
                ( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
        )
    };

in

    var zoomLevel = parseFloat($('body').css("zoom") || "1.0");

    return {
        top: (

            //The absolute mouse position
            pageY -

            //Click offset (relative to the element)
            this.offset.click.top -

            //Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.top -

            //The offsetParent's offset without borders (offset + border)
            this.offset.parent.top +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.top :
                ( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
        ) / zoomLevel,
        left: (

            //The absolute mouse position
            pageX -

            //Click offset (relative to the element)
            this.offset.click.left -

            //Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.left -

            //The offsetParent's offset without borders (offset + border)
            this.offset.parent.left +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.left :
                ( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
        ) / zoomLevel
    };

Das ist alles. Ich schlage vor, speichern es unter einem bestimmten Namen, so ist es leicht zu erkennen, dass es geändert wurde. E. g.: jquery-ui.ZOOMFIX.js

Benutzte ich die jquery-ui.js - Datei aus dem folgenden Paket: https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip

InformationsquelleAutor kragovip

Ich kämpfte mit diesem für ein paar Stunden. Ich hatte ein Gitter, wo ich begann mit der Skalierung ist es, durch die Einstellung der Schriftgröße (125% etc auf die container). Dies funktionierte gut, bis ich kam in Bilder, die nicht skaliert mit dem raster.

Dachte, ich würde mit zoom statt und es war Brillant. Dann stellte ich fest, durchschleifbar/abwerfbaren war nicht die Skalierung mit ihm hmm.. Verbringen Sie mehrere Stunden versucht, Sie zu zerstören und re-init die jqueryUI-Objekte, aber nichts funktionierte.

Dann schließlich erkannte ich, ich könnte die Verwendung einer Kombination von schriftart,-Größe zum Zoomen des grid-und css-zoom für die Bilder. Jetzt funktioniert alles und ich kann per drag/drop mit der gleichen Instanz von jQueryUI.

Hoffe, dieser Ansatz hilft jemand anderes. 🙂

InformationsquelleAutor Stefan Lindberg