CSS3 ölçeği uygulandığında sortable yanlış davranıyor

Question

CSS dönüşümü ile JQuery sıralanabilir öğesini ölçeklendiriyorum. JQuery, CSS ölçeklerini dikkate almazsa, her iki sıralı öğe de sürükleme sırasında konumlar ve ofsetler başlar.

jQuery Drag/Resize with CSS Transform Scale

Ama çözemez şey sürükleme başlar en sıralanabilir madde konumudur: kodu bulundu ile ben kısmen çözüldü. Biraz yukarı ve yukarı atlar.

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

Bu Fiddle sorunu gösterir: Ben başlangıç ​​olay işleyicisi içine koymak için anlamaya olamaz http://jsfiddle.net/adrianrosca/zbvLp/4/

Answer 1

farklardan biri sürüklenebilir ile üzerinde değil dönüşümü olmasıdır elemanlar kendilerini, ama ebeveyn üzerinde. Bu yüzden biraz mantığı değiştirir.

Bu özel durum için bir çözüm var, ancak duruma bağlı olarak değişebileceğini göreceksiniz. Örneğin, dönüşüm kökenini değiştirirseniz veya yatay bir sıralanabirseniz, uyarlanmış olması gerekir. Ama mantık aynı kalır:

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/

DÜZENLEME:

Önceki cevap konumlandırma için çalışır, ancak iyi Dabbler tarafından işaret olarak, doğrular kesişim işlevi ile bir kusur var olacak bir sıralama yapılmalıdır. Temel olarak, pozisyonlar doğru bir şekilde hesaplanır, ancak öğeler, dönüştürülmeyen genişlik ve yükseklik değerlerini tutar ve bu da soruna neden olur. Bu değerleri, ölçek faktörünü dikkate almak için başlangıç ​​olayında değiştirerek ayarlayabilirsiniz. Örneğin bu gibi:

Sorununu iki şey vardır

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

: Bir elementin

1. pozisyonu özelliği hesaplanan en yakın ebeveyn dayanmaktadır pozisyon mutlak veya göreceli olduğunu vardır. Şu anda ebeveyn temelde iyi olmayan bir vücuttır, bu yüzden kapsayıcı için position:relative; eklemeniz gerekir.
2. Daha önce de belirttiğiniz gibi, JQuery her ikisi için de ui.position ve ui.originalPosition hesaplamaları sırasında CSS ölçeklerini dikkate almaz, dolayısıyla her ikisine de "uygulama" zoomScale "uygulamanız gerekir".

CSS

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

Senaryo

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; 

Bu güncelleme kodu: http://jsfiddle.net/zbvLp/9/