CODEWITHSUNDEEP
javascriptjquerydraggablejquery-ui-sortable
Bart Zweers
Bart Zweers

Reputation: 117

Javascript (jQuery) disable page scroll when dragging items

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?

Upvotes: 6

Views: 7494

Answers (2)

Siddharth Bhandari
Siddharth Bhandari

Reputation: 1

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.

Upvotes: 0

Mike
Mike

Reputation: 3024

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

Upvotes: 4

Related Questions