Sortable zachowuje się nieprawidłowo po zastosowaniu skali CSS

Question

Skalowuję element sortowalny JQuery z transformacją CSS. Oba sortowalne pozycje rozpoczynają pozycje i przesunięcia, podczas gdy przeciąganie jest nieprawidłowe. JQuery nie bierze pod uwagę skal CSS. Rozwiązałem go częściowo z kodem znaleźć tutaj:

jQuery Drag/Resize with CSS Transform Scale

Ale rzecz nie mogę rozwiązać to sortable pozycja pozycja przy rozpoczęciu przeciągania. Podskakuje i trochę w prawo. Nie mogę dowiedzieć się, co włożyć do obsługi zdarzeń start:

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

Fiddle to pokazuje problem: http://jsfiddle.net/adrianrosca/zbvLp/4/

Answer 1

Różnica z Draggable jest to, że przekształcić nie jest na same elementy, ale na rodzica. Więc zmienia nieco logikę.

Oto rozwiązanie dla tego konkretnego przypadku, ale zobaczysz, że w zależności od sytuacji może się zmienić. Na przykład, jeśli zmienisz przekształcenie-pochodzenie, lub jeśli masz poziomy do sortowania, będzie musiał zostać dostosowany. Ale logika pozostaje taka sama:

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:

Poprzednia odpowiedź będzie działać do pozycjonowania, ale jak wskazano przez godnej dyletant, nie jest to wada z funkcją przecięcia, który sprawdza poprawność kiedy powinno nastąpić sortowanie. Zasadniczo pozycje są poprawnie obliczane, ale te wartości mają wartości width i , które nie są przekształcane, co jest przyczyną problemu. Można dostosować te wartości, modyfikując je w zdarzeniu początkowym, aby uwzględnić współczynnik skali. Jak to na przykład:

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

Są dwie rzeczy w swoim problemie: nieruchomość

1. Pozycja elementu jest obliczana na podstawie najbliższego rodzica, który ma pozycja jest absolutna lub względna. Macierzystym rodzicem w tej chwili jest ciało, które nie jest dobre, więc musisz dodać do kontenera position:relative;.
2. Ponieważ, jak już zauważyłeś, JQuery nie bierze pod uwagę skal CSS, gdy oblicza zarówno ui.position, jak i ui.originalPosition, więc musisz "zastosować" do nich obu: zoomScale.

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; 

Jest to kod zmiana: http://jsfiddle.net/zbvLp/9/