我试图jQuery UI排序工作与缩放CSS属性的身体。但是它不允许我在正确的位置正确地拖放。

拖动只与半区工作，如果用户试图拖放从右侧的空白区域（黑色区域在我的情况下）它不工作

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>