Javascript(jQuery）在拖动项目时禁用页面滚动

Javascript (jQuery) disable page scroll when dragging items

本文关键字：滚动 项目 jQuery 拖动 Javascript      更新时间：2023-09-26

我有一个类似小部件的系统，其中有可以拖动的小部件（使用jQuery draggable/sortable）。现在的问题是，当用户拖动其中一个小部件并将光标移动到边缘时，父div会滚动到光标的方向。

简化布局如下：

<div id="wrapper" style="width:WINDOW_WIDTH;">
  <div id="page_wrapper" style="width:10000px;">
    <div class="widget_page" style="width:WINDOW_WIDTH;">
      <div class="widget draggable"></div>
      <div class="widget draggable"></div>
      <div class="widget draggable"></div>
    </div>        
    <div class="widget_page" style="width:WINDOW_WIDTH;">
      <div class="widget draggable"></div>
      <div class="widget draggable"></div>
      <div class="widget draggable"></div>
    </div>
  </div>
</div>

有什么办法可以禁止pagewrapper滚动吗？

尝试在page_wrapper的css中添加overflow:hidden;。

只需在设置滚动条的父div上添加css属性"position as a static"。

$("selector").css("position","static");

前任。

$('.bottomSentences').draggable({
    cursor: 'move',
    helper: 'clone',
        start: function(e, ui)
        {
            $(ui.helper).addClass("ui-draggable-helper");
            $("#splitSentencesDiv").css("position","static");
        }       
});

这里在前。splitPensionesDiv是我的Div，我设置了卷轴。默认情况下，它的位置值是由bootstrap col-class相对设置的。

相关文章：