Question

我正在尝试创建一个类似于思维导图的应用程序，但它不一定非常复杂。我遇到的问题是，当我在页面上放置一个元素并使用jQuery draggable函数使其可拖动时，该元素可以向右拖动，并且当您拖动元素时页面的宽度会增加但是当您将元素拖动到左边得到一个负值，滚动条不会覆盖负空间。

我到处搜索，找不到任何东西。任何帮助将不胜感激。

JavaScript代码

$( function() {
    $("#draggable").draggable();
});

HTML标记：

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <div id="draggable">
  Can be dragged to the right of the screen and the scrollbar increases but 
  not to the left.
  </div>

JSFiddle Example

Answer 1

滚动条不应该向页面的顶部或左侧延伸，但如果拖动到负坐标并重置其位置，则可以通过增加页面大小来解决此问题，例如< / p>

var increasedLeft = 0;

$(function() {
  $("#draggable").draggable({
    stop: function(event, ui) {
      if (ui.position.left < 0) {
        $("#draggable").css({left: 0});
        $("#container").width($("#container").width() - ui.position.left);
        increasedLeft -= ui.position.left;
      } else if (increasedLeft > 0) {
      	$("#container").width($("#container").width() - Math.min(increasedLeft, ui.position.left));
        $("#draggable").css({left: (ui.position.left - Math.min(increasedLeft, ui.position.left))});
      	increasedLeft -= Math.min(increasedLeft, ui.position.left);
      }
    }
  });
});

html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
}

#draggable {
  background-color: black;
  color: white;
  width: 200px;
  margin: 0;
}

<body>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <div id="container">
    <div id="draggable">
      Can be dragged to the right of the screen and the scrollbar increases but not to the left.
    </div>
  </div>
</body>

当元素置于负位置时，如何使页面向左滚动？

1 个答案: