jQuery UI Draggable FireFox 问题答案

【问题标题】：jQuery UI Draggable FireFox issuejQuery UI Draggable FireFox 问题
【发布时间】：2017-10-29 22:50:27
【问题描述】：

我正在尝试使用 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 之外的所有其他浏览器中都能完美运行。

【问题讨论】：

标签： jquery html jquery-ui firefox draggable

【解决方案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>

【讨论】：