當元素置於負數位置時，如何使頁面向左滾動？

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