jQuery UI 可拖动的 FireFox 问题

Question

我正在尝试使用 jQuery UI 制作一个可拖动元素，除 Firefox 外，一切正常。 - 当我试图拖动它或恢复时，元素只是跳来跳去：

$(".dragable").draggable({
  axis: "y",
  revert: true
});

.dragable {
  width: 50px;
  height: 50px;
  background: #000000;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="dragable"></div>

它在除 FireFox 之外的所有其他浏览器中都能完美运行。

Answer 1

原因是 margin: auto，一种解决方法是将元素包裹在 div 中以使其居中：

$(".dragable").draggable({
  axis: "y",
  revert: true
});

.center {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.dragable {
  background: #000000;
  width: 100%;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="center">
  <div class="dragable"></div>
</div>

jQuery UI 可拖动的 FireFox 问题

jQuery UI Draggable FireFox issue

html

firefox

jquery

jquery-ui

draggable