Question

我试图用jQuery UI创建一个可拖动的元素，除了firefox之外一切正常。 - 当我试图拖动它或恢复时，元素只是跳起来：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

除了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 Draggable FireFox问题

1 个答案: