Question

在使用带有“收容”的JQuery可拖动功能时，我在IE和Chrome中固定div的问题一直存在问题。似乎每当我尝试拖动元素时，它都会捕捉到包含元素的左侧，直到我放开它然后再次开始拖动。

以下是一个例子：

CodePen

HTML

<div class="draggable">
</div>

.CSS

.draggable {
  background: salmon;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  position: fixed;
  left: 0;
  right: 0;
  cursor: move;
}

body {
  height: 500px;
}

JS：

$(function() {
  $(".draggable").draggable({
    containment: 'body'
  });
});

感谢您的帮助！

Answer 1

.draggable()的实现不适用于同一轴的两个属性（在您的情况下为left和right）。你必须使用其他一些技术来使元素居中。

请参阅以下示例：

$(function() {
  $(".draggable").draggable({
    containment: 'body'
  });
});

.draggable {
  background: salmon;
  width: 50px;
  height: 50px;
  position: fixed;
  cursor: move;

  /* Initial position */
  top: 0;
  left: 50%;
  margin-left: -25px;
}

body {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="draggable">
</div>

可拖动的固定元素在主体中居，导致它在IE和Chrome中向左捕捉？

1 个答案: