Javascript (jQuery) disable page scroll when dragging items - Stack Overflow

admin管理员组

文章数量:1335357

I have a widget-like system with widgets that are able to be dragged around (with jQuery draggable/sortable). The problem is now that when a user drags one of those widgets and moves the cursor on the edge, the parent div scrolls to the direction of the cursor.

A simplified layout is as follows:

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

is there any way i can disable the page_wrapper from scrolling?

I have a widget-like system with widgets that are able to be dragged around (with jQuery draggable/sortable). The problem is now that when a user drags one of those widgets and moves the cursor on the edge, the parent div scrolls to the direction of the cursor.

A simplified layout is as follows:

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

is there any way i can disable the page_wrapper from scrolling?

• javascript
• jquery
• draggable
• jquery-ui-sortable

Share Improve this question Follow asked Feb 7, 2012 at 12:21 Bart ZweersBart Zweers 11722 silver badges66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Try to add overflow:hidden; in the css of the page_wrapper.

just add css property "position as a static" on parent div for which you set the scrollbar.

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

ex.

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

        }       
}); 

here in ex. splitSentencesDiv is my Div for which i set the scroll. by default its position value is relative set by bootstrap col- class.

本文标签： Javascript (jQuery) disable page scroll when dragging itemsStack Overflow