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

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

Answer 1

滚动条不应该延伸到页面的顶部或左侧，但是例如，如果将可拖动对象放到负坐标上并重置其位置，则可以通过增加页面大小来解决此问题。

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

解决方案1
0 2017-11-28 14:57:19

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

问题描述

1 个解决方案

解决方案1 0 2017-11-28 14:57:19

解决方案1
0 2017-11-28 14:57:19