jQuery UI 可排序，主体缩放不起作用，无法正确计算拖放区域

Question

我正在尝试使用 body 上的缩放 CSS 属性来进行 jQuery UI 可排序工作。但它不允许我正确拖放到正确的位置。

拖动仅适用于一半区域，如果用户尝试从右侧的空白区域（在我的例子中为黑色区域）拖放，则它不起作用

https://codepen.io/VijayDhanvai/pen/poqxEzQ

掉落不起作用的红色区域

 $(function () {
    var zoomScale = $("body").css("zoom");
    console.log(typeof zoomScale, zoomScale.toString());
    var canvasHeight = $("#sortable").height();
    var canvasWidth = $("#sortable").width();

    $("#sortable").sortable({
      sort: function (e, ui) {
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var changeTop = ui.position.top - ui.originalPosition.top;
        var sortIndex =
          $("#sortable .ui-sortable-placeholder").index() + 30;
        var newLeft =
          ui.originalPosition.left +
          changeLeft / zoomScale -
          ui.item.parent().offset().left;

        var newTop =
          ui.originalPosition.top +
          changeTop / zoomScale -
          ui.item.parent().offset().top +
          sortIndex;

        ui.helper.css({
          left: newLeft,
          top: newTop,
        });
      },
    });
  });

 $(function () {
        var zoomScale = $("body").css("zoom");
        console.log(typeof zoomScale, zoomScale.toString());
        var canvasHeight = $("#sortable").height();
        var canvasWidth = $("#sortable").width();

        $("#sortable").sortable({
          sort: function (e, ui) {
            var changeLeft = ui.position.left - ui.originalPosition.left;
            var changeTop = ui.position.top - ui.originalPosition.top;
            var sortIndex =
              $("#sortable .ui-sortable-placeholder").index() + 30;
            var newLeft =
              ui.originalPosition.left +
              changeLeft / zoomScale -
              ui.item.parent().offset().left;

            var newTop =
              ui.originalPosition.top +
              changeTop / zoomScale -
              ui.item.parent().offset().top +
              sortIndex;

            ui.helper.css({
              left: newLeft,
              top: newTop,
            });
          },
        });
      });

 .ui-sortable-placeholder,
      .ui-sortable-helper {
        visibility: visible !important;
        background-color: black !important;
      }
      .ui-sortable-placeholder td,
      .ui-sortable-helper td {
        background-color: aqua;
      }

      table {
        /* width: 100%; */
        border-spacing: collapse;
        border-spacing: 0;
      }
      td {
        padding: 0px;
        min-width: 100%;
        border: solid 1px #ddd;
      }
      body {
        zoom: 1.3;

        
      }

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://github.com/borbit/jquery.viewport/raw/master/jquery.viewport.js"></script>
    <script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>

                  
  <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody id="sortable">
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$180</td>
        </tr>
      </tbody>
    </table>         

Answer 1

使用可拖动 ui 而不是可排序。https://jqueryui.com/draggable/

$(document).ready(function(){
    $('td').addClass('tddrag');
});
$(function () {
    var zoomScale = $("body").css("zoom");
    console.log(typeof zoomScale, zoomScale.toString());
    var canvasHeight = $(".sort").height();
    var canvasWidth = $(".sort").width();

    $(".tddrag").draggable({
        sort: function (e, ui) {
            var changeLeft = ui.position.left - ui.originalPosition.left;
            var changeTop = ui.position.top - ui.originalPosition.top;
            var sortIndex =  $(".sort .ui-sortable-placeholder").index() + 30;
            var newLeft =  ui.originalPosition.left + ( changeLeft / zoomScale - ui.item.parent().offset().left);
            var newTop =  ui.originalPosition.top + (changeTop / zoomScale -  ui.item.parent().offset().top) +  sortIndex;
            ui.helper.css({  
                left: newLeft,
                top: newTop,
            });
        },
    });
});

Answer 2

可能的原因

jQuery ui

sortable

的行为是将鼠标位置与元素偏移量进行比较。但是，如果在父元素上设置

zoom

，子元素的偏移值似乎不会受到

zoom

的影响。 （Safari CSS Reference稍微提到过。）

顺便说一句，根据Mozilla的zoom文档，CSS

zoom

是非标准的。这意味着它在不同的浏览器中可能有不同的行为。如果可以的话，尽量不要使用 CSS

zoom

。

解决方案：多重缩放

在您的情况下，如果将

zoom

设置为

<td>

，则可以很好地获取缩放后的宽度。所以我尝试设置多个

zoom

来模拟在

zoom

上设置

<body>

的视图：

tbody {
  zoom: calc(1 / 1.3);
}

td {
  zoom: 1.3;
  padding: 0px;
  min-width: 100%;
  border: solid 1px #ddd;
}

body {
  zoom: 1.3;
}

如果你这样做了，你就不用自己计算

helper

元素了：

$("#sortable").sortable();