jQuery Ziehen/Ändern der Größe mit CSS-Transformationsmaßstab

Meine eigene "Antwort" war bei dieser Gelegenheit die Anpassung der jQuery-Benutzeroberfläche, um eine separate Interaktion zu erstellen, die als "traggable" bezeichnet wurde. 

https://github.com/paullth/JS-libs

http://jsfiddle.net/paul_herve/ws27C/4/

Möchte noch über Alternativen erfahren ...

Ein anderer Ansatz wäre, ein Plugin hinzuzufügen, das die Transformation kompensiert (denken Sie daran, "transform: true" zur Plugin-Initialisierung hinzuzufügen.) 

Das ui.draggable muss über eine inverse Matrix der Transformation übergeben werden, um das Element in dem nicht transformierten Bereich zu positionieren, den der Browser später bei der Anzeige transformiert.

Für "Draggable" funktionierte folgendes für mich (jqueryui 1.10) (die Matrixberechnung, die ich aus jquery.panzoom entnommen habe):

var Matrix = function(a, b, c, d, e, f, g, h, i) {
    if ($.type(a) === 'array') {
        this.elements = [
            +a[0], +a[2], +a[4],
            +a[1], +a[3], +a[5],
                0,     0,     1
        ];
    } else {
        this.elements = [
            a, b, c,
            d, e, f,
            g || 0, h || 0, i || 1
        ];
    }
};

Matrix.prototype = {
    /**
     * Multiply a 3x3 matrix by a similar matrix or a vector
     * @param {Matrix|Vector} matrix
     * @return {Matrix|Vector} Returns a vector if multiplying by a vector
     */
    x: function(matrix) {
        var isVector = matrix instanceof Vector;

        var a = this.elements,
            b = matrix.elements;

        if (isVector && b.length === 3) {
            // b is actually a vector
            return new Vector(
                a[0] * b[0] + a[1] * b[1] + a[2] * b[2],
                a[3] * b[0] + a[4] * b[1] + a[5] * b[2],
                a[6] * b[0] + a[7] * b[1] + a[8] * b[2]
            );
        } else if (b.length === a.length) {
            // b is a 3x3 matrix
            return new Matrix(
                a[0] * b[0] + a[1] * b[3] + a[2] * b[6],
                a[0] * b[1] + a[1] * b[4] + a[2] * b[7],
                a[0] * b[2] + a[1] * b[5] + a[2] * b[8],

                a[3] * b[0] + a[4] * b[3] + a[5] * b[6],
                a[3] * b[1] + a[4] * b[4] + a[5] * b[7],
                a[3] * b[2] + a[4] * b[5] + a[5] * b[8],

                a[6] * b[0] + a[7] * b[3] + a[8] * b[6],
                a[6] * b[1] + a[7] * b[4] + a[8] * b[7],
                a[6] * b[2] + a[7] * b[5] + a[8] * b[8]
            );
        }
        return false; // fail
    },
    /**
     * Generates an inverse of the current matrix
     * @returns {Matrix}
     */
    inverse: function() {
        var d = 1 / this.determinant(),
            a = this.elements;
        return new Matrix(
            d * ( a[8] * a[4] - a[7] * a[5]),
            d * (-(a[8] * a[1] - a[7] * a[2])),
            d * ( a[5] * a[1] - a[4] * a[2]),

            d * (-(a[8] * a[3] - a[6] * a[5])),
            d * ( a[8] * a[0] - a[6] * a[2]),
            d * (-(a[5] * a[0] - a[3] * a[2])),

            d * ( a[7] * a[3] - a[6] * a[4]),
            d * (-(a[7] * a[0] - a[6] * a[1])),
            d * ( a[4] * a[0] - a[3] * a[1])
        );
    },
    /**
     * Calculates the determinant of the current matrix
     * @returns {Number}
     */
    determinant: function() {
        var a = this.elements;
        return a[0] * (a[8] * a[4] - a[7] * a[5]) - a[3] * (a[8] * a[1] - a[7] * a[2]) + a[6] * (a[5] * a[1] - a[4] * a[2]);
    }
};

var Vector = function (x, y, z) {
    this.elements = [ x, y, z ];
};

/**
 * Get the element at zero-indexed index i
 * @param {Number} i
 */
Vector.prototype.e = Matrix.prototype.e = function(i) {

    if( this.elements[ i ] != undefined ){
        return this.elements[ i ];    
    }

    return this.elements;
};    

$.ui.plugin.add("draggable", "transform", {

    start: function( event, ui ) {

        if(!$(this).data('ui-draggable')){
            return false;
        }            

        var inst = $(this).data("ui-draggable");

        inst.matrix = new Matrix(function(matrix){

            var rmatrix = new RegExp(
                    '^matrix\\(' +
                    '(\\-?[\\d\\.e]+)' + '\\,?\\s*' +
                    '(\\-?[\\d\\.e]+)' + '\\,?\\s*' +
                    '(\\-?[\\d\\.e]+)' + '\\,?\\s*' +
                    '(\\-?[\\d\\.e]+)' + '\\,?\\s*' +
                    '(\\-?[\\d\\.e]+)' + '\\,?\\s*' +
                    '(\\-?[\\d\\.e]+)' + '\\)$'
            );                

            var matrix = rmatrix.exec( matrix );
            if (matrix) {
                matrix.shift();
            }
            return matrix || [ 1, 0, 0, 1, 0, 0 ];

        }([$(this).parents('[style*="transform"]').css('transform')]));            
    },
    drag: function( event, ui ) {

        if(!$(this).data('ui-draggable')){
            return false;
        }            

        var inst = $(this).data("ui-draggable");

        var t_pos = inst.matrix.inverse().x(new Vector(ui.position.left, ui.position.top, 0));

        ui.position.left = t_pos.e(0);
        ui.position.top = t_pos.e(1);                   

        if(inst.options.grid) {
            ui.position.left = ui.position.left - ui.position.left % inst.options.grid[0];
            ui.position.top  = ui.position.top - ui.position.top % inst.options.grid[1];                
        }

        if( inst.containment ){

            if( ui.position.left < inst.containment[0] ){
                ui.position.left = inst.containment[0];
            }

            if( ui.position.left > inst.containment[2] ){
                ui.position.left = inst.containment[2];
            }                

            if( ui.position.top < inst.containment[1] ){
                ui.position.top = inst.containment[1];
            }  

            if( ui.position.top > inst.containment[3] ){
                ui.position.top = inst.containment[3];
            }
        }
    },     
});

Die oberste Antwort arbeitete für mich, bis ich einen Glitch on draggable :( gefunden habe.

Wenn auch das Containment selbst skaliert ist:

• wenn es <1 ist, kann es nicht vollständig in sein Eindämmungsfeld gezogen werden
• wenn es> 1 skaliert wird, kann es aus dem Sicherheitsbehälter gezogen werden

Zum Glück habe ich eine Lösung gefunden hier

Ich habe versucht, die transform scale () - Korrektur für die Größenänderung durchzuführen , die von gungfoo auf ein Element geschrieben wurde, das bei 10% der tatsächlichen Größe angezeigt wird, und die Methode funktionierte nicht. Der Cursor hat sich während der Größenänderung immer noch vom Element entfernt.

Ich habe die letzten beiden Zeilen der resizeFix-Methode geändert, um die Breite und Höhe des Elements direkt zu aktualisieren. Dadurch wurde mein Problem behoben.

function resizeFix(event, ui) {

    var changeWidth = ui.size.width - ui.originalSize.width; // find change in width
    var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

    var changeHeight = ui.size.height - ui.originalSize.height; // find change in height
    var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

    ui.originalElement.width(newWidth);
    ui.originalElement.height(newHeight);
}

ich hatte ein ähnliches Problem mit der Transformation und endete mit css:

transform-Origin

http://www.w3schools.com/cssref/css3_pr_transform-Origin.asp

hast du es ausprobiert? vielleicht hilft es.

Ich fand, dass ich das skalierte Element einfach mit einem anderen div umschließen und stattdessen per Draggable darauf setzen konnte.

Ich wundere mich lange, warum @GungFoo Lösung nicht für Jquery Resizable funktionierte, aber einige Leute sagten, dass es funktioniert hat. Schließlich habe ich herausgefunden, dass es 4 Punkte für die Verwendung von jQuery Draggable und Resizable mit CSS Transform Scale gibt:

1. Verwenden von @GungFoo-Lösungen!
2. Verwenden von separaten divs zum Ziehen und Ändern der Größe!
3. Verwenden Sie die richtige CSS-Transformation für Divs!
4. Verwenden der richtigen CSS-Richtung für divs!

Überprüfen Sie einige dieser Probleme:

function resizeDiv(event, ui) {
        debugger;
        var changeWidth = ui.size.width - ui.originalSize.width; 
        var newWidth = ui.originalSize.width + changeWidth / 4; 

        var changeHeight = ui.size.height - ui.originalSize.height;
        var newHeight = ui.originalSize.height + changeHeight / 4; 

        ui.size.width = newWidth;
        ui.size.height = newHeight;

};
$('#box').resizable({
    minWidth: -($(this).width()) * 10,
    minHeight: -($(this).height()) * 10, 
    resize: resizeDiv
});

$('#box2').resizable({
    minWidth: -($(this).width()) * 10,
    minHeight: -($(this).height()) * 10, 
    resize: resizeDiv
});

$('#box3').resizable({
    minWidth: -($(this).width()) * 10,
    minHeight: -($(this).height()) * 10, 
    resize: resizeDiv
});

$('#box4').resizable({
    minWidth: -($(this).width()) * 10,
    minHeight: -($(this).height()) * 10, 
    resize: resizeDiv
});

.box{
  position:absolute;
  width:30px;
  height:30px;
  border:1px solid black;
  font-size:3pt;
  overflow:hidden;
  -webkit-transform:scale(4);
  direction:ltr;
}
#box{
  transform-Origin: top left;
  top: 0;
  left:0;
}
#box2{
  transform-Origin: bottom left;
  top: 250px;
  left:0;
}
#box3{
  direction:rtl;
  left: 250px;
  top: -10px;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div id= 'box' class="box"> 
True styles
</div>

<div id= 'box2' class="box"> 
Bad transform-orgin
</div>

<div id= 'box3' class="box"> 
Bad direction
</div>

Danke an @Guy;)

Hier ist meine Lösung. Einige der oben genannten Codes funktionierten nicht für mich.

Ich habe ein ziehbares Bild und wende die CSS-Transformation an, um das Bild zu drehen und zu skalieren. Sobald ich es skaliere/drehe, ist die Position beim Ziehen-Start deaktiviert. Um das Problem zu beheben, berechne ich die Sollwertdifferenz von Stopp bis Start und ziehe beim Ziehen einen neuen Sollwert mit der berücksichtigten Differenz an.

var $img = $("#my-image-id");

$img.posLeft  = 0;
$img.posTop  = 0;
$img.diffLeft  = 0;
$img.diffTop  = 0;

$img.draggable({
  start: function( event, ui ) {
    //check the difference from start to stop setpoints
    $img.diffLeft  = $img.posLeft-ui.position.left;
    $img.diffTop  = $img.posTop-ui.position.top;
    //console.log('start x: '+Math.floor(ui.position.left)+' y: '+Math.floor(ui.position.top));
    //console.log('diff x: '+Math.floor($img.posLeft-ui.position.left)+' y: '+Math.floor($img.posTop-ui.position.top));
  },
  drag: function( event, ui ) {
    //fix the offset bug that is applied after CSS transform, to do that just add the value difference
    ui.position.left = ui.position.left+$img.diffLeft;
    ui.position.top = ui.position.top+$img.diffTop;
    //console.log('drag x: '+ui.position.left+' y: '+ui.position.top);
  },
  stop: function( event, ui ) {
    //save the last applied setpoints
    $img.posLeft = ui.position.left;
    $img.posTop = ui.position.top;
    //console.log('stop x: '+Math.floor(ui.position.left)+' y: '+Math.floor(ui.position.top));
  }
});

Der CSS-Transformations-Origin-Trick behebt den Fehler nur für die Skalierung. Die Drehung sollte sich in der Mitte befinden, damit Sie die Standardeinstellung von 50% bis 50% beibehalten möchten.

Keine dieser Lösungen funktionierte für mich. Zum einen konnte ich die Eltern der Draggables nicht transformieren - nur die Draggables selbst wurden transformiert.

So habe ich dieses Problem behoben:

$('.draggable').draggable(
{
    cancel: '.restrict-drag',
    scroll: false,
    containment: '#contain',

    start: function(event, ui) 
    {
        ui.position.left = 0;
        ui.position.top = 0;
    },

    drag: function(event, ui) 
    {
        ui.position.left = ui.position.left - ($(event.target).width() * Zoom);
        ui.position.top = ui.position.top - ($(event.target).height() * Zoom);
    }
});

Zoom ist standardmäßig 0.

Um die Draggables zu skalieren, habe ich Folgendes getan:

function changeZoom(zoom)
{
    $('.draggable').each(function() { $(this).css('transform-Origin', '50% 50%'); $(this).css('transform', 'scale(' + zoom + ')'); });
    Zoom = zoom; // Global Zoom-variable
}

Und alles scheint gut zu funktionieren.

Ich hatte das gleiche Problem, und der einfachste Weg für mich war, die Dragable-Funktionalität von Jquery-ui NICHT zu verwenden, da diese keine CSS3-Transformationseigenschaften unterstützt.

Was für mich wirklich gut war, war die Implementierung einer eigenen ziehbaren Funktionalität: http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/

Ich weiß, dass es Ihr Problem nicht zu 100% löst, da Sie immer noch die jquery-ui-Funktion verwenden möchten, die sich jedoch ziehen lässt, aber es könnte anderen helfen.

Ich würde dies als Kommentar zu der akzeptierten Antwort von Gung Foo hinzufügen, aber ich habe nicht die Vertreter, die einen Kommentar abgeben.

Ich fand, dass die Antwort von Gung perfekt für mich funktionierte, aber der veränderbare Fix funktionierte nur beim Ziehen aus der rechten unteren Ecke. Ich habe auch Griffe an den anderen drei Ecken und stellte fest, dass sich das Element verschieben würde. Daher musste ich den Fix von Draggable zu den anpassbaren Funktionen hinzufügen. 

Vielleicht gibt es einen besseren Weg, oder ich habe etwas verpasst, aber ich habe festgestellt, dass die geänderte Größe unten für mich von allen Griffen aus funktioniert:

$(this).resizable({
    minWidth: -(contentElem.width()) * 10,  // these need to be large and negative
    minHeight: -(contentElem.height()) * 10, // so we can shrink our resizable while scaled

    // adjust the initial position to accomodate for the scale
    start: function(event, ui){
        ui.position.left = Math.round(ui.position.left/zoomScale);
        ui.position.top = Math.round(ui.position.top/zoomScale);
        ui.originalPosition.left = ui.position.left;
        ui.originalPosition.top = ui.position.top;
    },

    resize: function(event, ui) {

        var changeWidth = ui.size.width - ui.originalSize.width; // find change in width
        var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

        var changeHeight = ui.size.height - ui.originalSize.height; // find change in height
        var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

        ui.size.width = newWidth;
        ui.size.height = newHeight;

        // if the position is changed by a NW,NE,SW handle resize adjust for the scale
        var changeWidth = ui.size.width - ui.originalSize.width; // find change in width
        var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

        var changeHeight = ui.size.height - ui.originalSize.height; // find change in height
        var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

        ui.size.width = newWidth;
        ui.size.height = newHeight;

    }
});

Für unterschiedliche Größenänderungsecke

$('.rect-item').resizable({
        handles: 'n,e,s,w,ne,se,sw,nw',
        resize: (e, ui) => {
          const zoomScale = Your scale;
          const changeWidth = ui.size.width - ui.originalSize.width; // find change in width
          const newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

          const changeHeight = ui.size.height - ui.originalSize.height; // find change in height
          const newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

          ui.size.width = newWidth;
          ui.size.height = newHeight;

          // here
          const posOrigin = ui.originalPosition;
          if (posOrigin.left !== ui.position.left) {
            ui.position.left = posOrigin.left - changeWidth / zoomScale;
          }
          if (posOrigin.top !== ui.position.top) {
            ui.position.top = posOrigin.top - changeHeight / zoomScale;
          }

        }
      });