如何修复jquery-ui设置center align元素拖动时的偏移量？

wfauudbj 于 2023-05-28 发布在 jQuery

关注(0)|答案(1)|浏览(193)

下面是垂直中心对齐元素可拖动example：

<html>
<head>
    <style>
        #draggablediv {
            width: 100px;
            height: 100px;
            background-color: yellow;

            position: absolute;
            margin: auto 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="draggablediv"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#draggablediv").draggable();
        });
    </script>
</body>
</html>

因为“保证金：auto”，则可拖动元素将不再准确地设置最高值。有办法让它正常工作吗？

jquery

来源：https://stackoverflow.com/questions/76346884/how-to-fix-the-offset-when-jquery-ui-set-center-align-element-draggable

1条答案

按热度按时间

htrmnn0y1#

这个问题可以分为两个步骤来解决：

为了让你的元素在最初的时候垂直居中，我建议你使用FlexBox：

/* to make sure that both document root & body take the whole vertical space */
html,body {
  height: 100%;
  display: flex;
  align-items: center;
}

要修复顶部/底部错误偏移，应删除

#draggablediv {
  ... 
  ... 
  /* remove these 2 lines:*/
  top: 0; /* <--- this */
  bottom: 0; /* <--- this */
  ...
}

这是众多建议之一，另一个建议（如果你不想接触body和文档根），你可以使用另一个父div容器来应用相同的先前规则，或者也使用JQuery将元素居中。

赞(0）回复(0）举报 2023-05-28

我来回答

如何修复jquery-ui设置center align元素拖动时的偏移量？

1条答案

相关问题

热门标签

最新问答