JQuery-UI 鼠标位置可拖动

Question

我有这个代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Draggable - Default functionality</title>
    <style>
        #draggable {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            border: 1px solid red;
        }

        .container {
            height: 500px;
            width: 500px;
            border: 1px solid green;
            transform: scale(1.6);
            position: relative;
            left: 300px;
            top: 150px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function() {
            $("#draggable").draggable();
        });
    </script>
</head>

<body>
    <div class="container">
        <div id="draggable" class="ui-widget-content">
            <p>Drag me around</p>
        </div>
    </div>




</body>

</html>

没有 transform: scale(1.6); 也能完美运行。但是，#draggable 移动速度比使用变换属性的鼠标快。如何使其可拖动并将容器缩放到 1.65 这样的值？有没有我应该使用的可拖动选项？

Answer 1

这可以通过调整 transform: scale(1.6) 来解决。当项目被拖动时，它使用它的 position 来调整被拖动项目的 top 和 left。使用 scale()，这些值将关闭，您将看到项目移动速度比鼠标移动的速度相同。

x1 = x * 1.6; y1 = y * 1.6;

要用鼠标移动，我们需要将其调整回相同的 1:1（而不是 1:1.6）比例。可以这样做：

jQuery > 可拖动 > 拖动选项

drag: function(e, ui) {
  // Adjust for Scale
  var myScale = parseFloat($('.container').css('transform').split(',')[3]);
  var myTop = Math.round(ui.position.top / myScale);
  var myLeft = Math.round(ui.position.left / myScale);
  ui.position = {
    top: myTop,
    left: myLeft
  };
}

仅供参考，$('.container').css('transform') 将 return：matrix(1.6, 0, 0, 1.6, 0, 0)。查看更多：Get CSS transform property with jQuery

您可以将 1.6 硬编码到您的脚本中，但我喜欢保持可移植性。因此，如果您更改 CSS，则不必更改此脚本。查看更多关于设置位置：http://api.jqueryui.com/draggable/#event-drag

工作示例：https://jsfiddle.net/Twisty/1gnehyum/

JQuery-UI 鼠标位置可拖动

JQuery-UI Draggable drag at mouse position

javascript

jquery

jquery-ui

draggable

jquery-ui-draggable