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比使用transform属性的鼠标移动得更快。如何使其可拖动并将容器缩放到像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＆gt;可拖动＆gt;拖动选项

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')将返回：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可拖动拖动鼠标位置

1 个答案: