如何用CSS或全局jQuery解决transform:scale()与jQuery draggable兼容问题？

问题描述 #

父容器通过-webkit-transform: scale(1.5)缩放后，内部使用jQuery UI Draggable的元素会出现拖拽时与鼠标位置错位的情况，且无法修改第三方组件的Draggable调用代码。

解决方案 #

方案一：CSS替代方案（推荐，无需JS修改） #

放弃使用transform: scale()，改用zoom属性实现缩放：

/* 替换原来的transform缩放 */
zoom: 1.5;

zoom是浏览器原生缩放方式，不会改变元素的坐标计算空间，jQuery UI Draggable能正确识别鼠标位置，不会出现错位，webkit环境下完全兼容。

方案二：全局jQuery修正方案（必须保留transform缩放时使用） #

在第三方组件调用Draggable之后，添加以下全局修正代码：

$(document).on('mouseover', '.draggable', function() {
  if ($(this).data('draggable-fixed')) return;
  $(this).data('draggable-fixed', true).draggable('option', {
    start: function(event, ui) {
      var $parent = $(this).closest('[style*="transform: scale"]');
      if (!$parent.length) return;
      // 提取父容器的缩放比例（适配单值scale场景）
      var scale = parseFloat($parent.css('-webkit-transform').match(/scale\(([\d.]+)\)/)[1]);
      $(this).data('draggable-scale', scale);
    },
    drag: function(event, ui) {
      var scale = $(this).data('draggable-scale');
      if (!scale || scale === 1) return;
      // 修正拖拽偏移量，抵消缩放影响
      ui.position.left = ui.position.left / scale;
      ui.position.top = ui.position.top / scale;
    }
  });
});

这段代码会自动为所有.draggable元素添加坐标修正逻辑：通过获取父容器的缩放比例，在拖拽时将计算出的位置除以缩放比例，抵消transform缩放带来的坐标偏差。

内容的提问来源于stack exchange，提问作者Paul