Sortierbar verhält sich falsch, wenn CSS3-Skalierung angewendet wird

Question

Ich skaliere ein sortierbares JQuery-Element mit CSS-Transformation. Sowohl die sortierbaren Objekte beginnen Positionen und Offsets beim Ziehen sind falsch, da JQuery keine CSS-Maßstäbe berücksichtigt. Ich löste es teilweise mit dem Code hier:

jQuery Drag/Resize with CSS Transform Scale

Aber das, was ich kann nicht die sortierbare Artikel Position bei Drag beginnt lösen. Es springt auf und rechts ein bisschen. Ich kann nicht herausfinden, was in den Start-Ereignishandler setzen:

 start: function(e, ui) 
     { 
      // something is needed here to fix the initial offset 
     } 

Dieses Fiddle zeigt das Problem: http://jsfiddle.net/adrianrosca/zbvLp/4/

Answer 1

Ein Unterschied mit ziehbar ist, dass die Transformation ist nicht auf die Elemente selbst, aber auf dem Elternteil. Es ändert sich also ein bisschen die Logik.

Hier ist eine Lösung für diesen speziellen Fall, aber Sie werden sehen, dass sich dies je nach Situation ändern kann. Zum Beispiel, wenn Sie transform-Herkunft ändern, oder wenn Sie eine horizontale Sortierung haben, muss es angepasst werden. Aber die Logik bleibt gleich:

var zoomScale = 0.5; 

$(".container") 
    .sortable({ 

    sort: function(e, ui) { 
    console.log(ui.position.left) 
     var changeLeft = ui.position.left - ui.originalPosition.left; 
     // For left position, the problem here is not only the scaling, 
     // but the transform origin. Since the position is dynamic 
     // the left coordinate you get from ui.position is not the one 
     // used by transform origin. You need to adjust so that 
     // it stays "0", this way the transform will replace it properly 
     var newLeft = ui.originalPosition.left + changeLeft/zoomScale - ui.item.parent().offset().left; 

     // For top, it's simpler. Since origin is top, 
     // no need to adjust the offset. Simply undo the correction 
     // on the position that transform is doing so that 
     // it stays with the mouse position 
     var newTop = ui.position.top/zoomScale; 

     ui.helper.css({ 
     left: newLeft, 
     top: newTop 
     }); 
    } 
    }); 

http://jsfiddle.net/aL4ntzsh/5/

EDIT:

vorherige Antwort wird für die Positionierung arbeiten, aber wie durch Decent Dabbler zeigt, gibt es einen Fehler mit der Schnittfunktion, die überprüft, wenn Eine Sortierung sollte erfolgen. Grundsätzlich werden Positionen korrekt berechnet, aber die Elemente behalten Breite und Höhe Werte, die nicht transformiert werden, was das Problem verursacht. Sie können diese Werte anpassen, indem Sie sie beim Start-Ereignis ändern, um den Skalierungsfaktor zu berücksichtigen. Wie dies zum Beispiel:

start: function(e, ui) { 
     var items = $(this).data()['ui-sortable'].items; 
     items.forEach(function(item) { 
     item.height *= zoomScale; 
     item.width *= zoomScale; 
     }); 
    } 

http://jsfiddle.net/rgxnup4v/2/

Answer 2

Es gibt zwei Dinge in Ihr Problem:

1. Eigenschaft Position eines Elements berechnet auf der nächsten Eltern beruht, die Position absolut oder relativ hat ist. Im Moment ist der Elternteil ein Körper, der nicht gut ist, also müssen Sie position:relative; für den Container hinzufügen.
2. Wie Sie bereits bemerken, berücksichtigt JQuery keine CSS-Skalierung, wenn Sie sowohl ui.position als auch ui.originalPosition berechnen. Sie müssen also beide auf "zoomScale" anwenden.

CSS

.container 
{ 
    position: relative; 
    transform: scale(0.5); 
    transform-origin: center top; 
} 

Script

var changeLeft = ui.position.left - ui.originalPosition.left; 
var newLeft = (ui.originalPosition.left + changeLeft)/zoomScale; 
var changeTop = ui.position.top - ui.originalPosition.top; 
var newTop = (ui.originalPosition.top + changeTop)/zoomScale; 

Dies ist Update-Code: http://jsfiddle.net/zbvLp/9/