jQuery có thể kéo và -webkit-transform: scale();

Question

Tôi có một tình huống mà bên trong một div có các mục có thể kéo được. Tuy nhiên, khi phụ huynh div được chia tỷ lệ bằng cách sử dụng -webkit-transform, thì khả năng kéo có thể dừng hoạt động đúng cách.

Tôi đã sao chép kịch bản here.

Như bạn có thể thấy, mục có thể kéo di chuyển tương đối so với tài liệu, mặc dù bố mẹ nằm ở một tỷ lệ hoàn toàn khác.

Tôi có thang đo (1.5 trong ví dụ) dưới dạng biến trong JS, vì vậy tôi có thể sử dụng, nhưng ở đâu? Tôi cần phải chia khoảng cách kéo theo quy mô, phải không? Tôi có thể làm điều này ở đâu?

Chỉnh sửa: Tôi đã thử đặt chức năng thành drag -event, nhưng không thể tìm ra cách thực sự thay đổi khoảng cách kéo.

Edit2: tôi digged nguồn jQuery UI, và có vẻ như không có cách nào để làm điều này từ sự kiện drag:

if(this._trigger('drag', event, ui) === false) { 
    this._mouseUp({}); 
    return false; 
} 

Như bạn có thể thấy, giá trị trả về của callback chức năng không được lưu trữ theo bất kỳ cách nào. Vị trí của phần tử được thay đổi sau khi gọi lại đã kích hoạt, do đó việc thay đổi CSS bên trong cuộc gọi lại không hoạt động.

Bạn có thể xem mã có liên quan here bằng cách sử dụng tìm kiếm trong trình duyệt với chuỗi này:

_mouseDrag: function(event, noPropagation) { 

Answer 1

Do số lượng nhỏ trải nghiệm với JavaScript của tôi, tôi đã không nhận ra rằng gọi lại thực tế có thể sửa đổi vị trí, mặc dù nó không return bất kỳ điều gì. Điều này là bởi vì trong các tham số JS rõ ràng là theo mặc định thông qua tham chiếu.

Dưới đây là một mã làm việc:

// Couldn't figure out a way to use the coordinates 
// that jQuery also stores, so let's record our own. 
var click = { 
    x: 0, 
    y: 0 
}; 

$('.draggable').draggable({ 

    start: function(event) { 
     click.x = event.clientX; 
     click.y = event.clientY; 
    }, 

    drag: function(event, ui) { 

     // This is the parameter for scale() 
     var zoom = 1.5; 

     var original = ui.originalPosition; 

     // jQuery will simply use the same object we alter here 
     ui.position = { 
      left: (event.clientX - click.x + original.left)/zoom, 
      top: (event.clientY - click.y + original.top)/zoom 
     }; 

    } 

}); 

Answer 2

tôi nghĩ rằng bạn cần sự năng biến (http://plugins.jquery.com/project/transformable) jQuery plugin, để 'bình thường hóa' quy mô WebKit. Sau đó, kéo sẽ hoạt động như trong Firefox.

Đây là plugin - http://flin.org/js/jquery.transformable.js. Tôi nghĩ rằng nó sẽ giải quyết vấn đề của bạn. Đây là phiên bản của tôi về mã của bạn: http://jsfiddle.net/vMaXm/4/

$("#parent").setTransform("scalex", 1.5); 
//$("#parent").setTransform("scaley", 1.5); 
$('.draggable').draggable({ containment: "parent" }); 

Tuy nhiên, tại thời điểm này, nếu tôi bỏ ghi chú dòng giữa tôi nhận được cùng một vấn đề bạn báo cáo.