Có thể sắp xếp hoạt động sai khi quy mô CSS3 được áp dụng

Question

Tôi đang chia tỷ lệ phần tử có thể sắp xếp JQuery với chuyển đổi CSS. Cả hai mục có thể sắp xếp bắt đầu vị trí và bù trong khi kéo là sai beacuse JQuery không xem xét quy mô CSS. Tôi giải quyết nó một phần với mã tìm thấy ở đây:

jQuery Drag/Resize with CSS Transform Scale

Nhưng điều tôi không thể giải quyết là vị trí mục sắp xếp được ở bắt đầu kéo. Nó nhảy lên và phải một chút. Tôi không thể tìm ra những gì để đưa vào xử lý sự kiện bắt đầu:

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

Fiddle này cho thấy vấn đề: http://jsfiddle.net/adrianrosca/zbvLp/4/

Answer 1

Một khác biệt với kéo là chuyển không nằm trên bản thân các yếu tố, nhưng trên phụ huynh. Vì vậy, nó thay đổi một chút logic.

Đây là giải pháp cho trường hợp cụ thể này, nhưng bạn sẽ thấy tùy thuộc vào tình huống có thể thay đổi. Ví dụ: nếu bạn thay đổi chuyển đổi nguồn gốc hoặc nếu bạn có thể sắp xếp theo chiều ngang, nó sẽ phải được điều chỉnh. Nhưng logic vẫn như cũ:

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:

câu trả lời trước sẽ làm việc cho vị trí, nhưng khi được trỏ bởi Dabbler Decent, có một lỗ hổng với chức năng ngã tư mà xác nhận khi một phân loại nên xảy ra. Về cơ bản, các vị trí được tính toán chính xác, nhưng các mục giữ cho các chiều cao chiều rộng và chiều cao giá trị không được chuyển đổi gây ra sự cố. Bạn có thể điều chỉnh các giá trị này bằng cách sửa đổi chúng trên sự kiện bắt đầu để tính đến yếu tố tỷ lệ. Như thế này ví dụ:

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

Có hai điều trong vấn đề của bạn: tài sản

1. Vị trí của một nguyên tố được tính toán dựa vào cha mẹ gần trong đó có vị trí là tuyệt đối hay tương đối. Ngay bây giờ dựa trên cha mẹ là cơ thể mà không phải là tốt, do đó bạn phải thêm position:relative; cho container.
2. Bởi vì, như bạn đã nhận thấy, JQuery không xem xét cân nhắc CSS khi tính cả hai số ui.position và ui.originalPosition để bạn phải "áp dụng" zoomScale cho cả hai.

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; 

Đây là mã cập nhật: http://jsfiddle.net/zbvLp/9/