All geek questions in one place

Javascript (jQuery) disables page scrolling while dragging items

I have a widget-like system with widgets that you can drag and drop (with jQuery draggable / sortable). The problem is that when the user drags one of these widgets and moves the cursor around the edge, the parent div scrolls in the direction of the cursor.

The 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 a way to disable the scrolling of the page_wrapper?

+6
source share
2 answers

Try adding overflow:hidden; in css page_wrapper.

+4
source

just add the css property "position as static" to the parent div for which you set the scroll bar.

 $("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 the former splitSentencesDiv is my Div for which I set the scroll. by default, its position value is relatively set by the col- bootstrap class.

0
source

Source: https://habr.com/ru/post/907843/

More articles:


All Articles