How do I prevent jQuery dragging from scrolling?

Question

I have two div's when dragging from div1 to div2, the div1 scrollbar will appear and keep extending all the way until I drag the element on div2. How can I prevent the div from extending when I drag the element inside? Whole the element I am dragging does not break?

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 hidden-sm hidden-xs">
      <div id='external-events'>
        <h4>Draggable Events</h4>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
      </div>
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12">
      <hr>
      <div id="calendar"></div>
      //drop event here
    </div>
</div>

Drag panel CSS and size

#external-events {
  float: left;
  max-width: 260px;
  width: 260px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  margin-left: -10px;
}

after dragging

supposed to be like that after dragging

I'm not exactly sure what you're asking, but if you want to keep a div from having a scroll bar, you can achieve this with CSS buy using `overflow: hidden;` — Josh, Feb 24 '17 at 01:35

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

Try to remove overflow-y: auto and add overflow: hidden to your #external-events.

Edit

This answer from Stack Overflow might help shed some light on how to use prevent jQuery from scrolling the page when using draggable elements. Without a working example, I'm not 100% sure this is what you're talking about, but hopefully it proves to be helpful.

Edit 2

In the pictures you posted, it looks like it's scrolling the overflow on the x-axis. That means you'll want to add overflow-x: hidden to the #externalevents styling. You can keep the overflow-y: auto in your code.

edited May 23 '17 at 12:31

Community

1
1

answered Feb 24 '17 at 01:43

Matthew Beckman

1,702
2
16
28

i want to have a scroll bar for y axis. setting to overflow:hidden does not prevent the div from scrolling – MVC newbie Feb 24 '17 at 01:50
Are you able to provide a working example on CodePen or JSFiddle? – Matthew Beckman Feb 24 '17 at 01:52
i added pictures.i tried to add to jsfiddle but it doesnt work somehow.Removing `over-flow-y` will cause the element to extend the page if i have too many items inside. so i want to keep them inside a div only – MVC newbie Feb 24 '17 at 02:03
@MVCnewbie See my updated answer. It looks like from your screenshot it's just overflow on the `x-axis`, so hopefully my answer helps. If applying it just to **`#externalevents`** doesn't work, try also applying it to one of the parent classes like **`.col-md-2`**. – Matthew Beckman Feb 24 '17 at 04:40
HI matthew,thanks for helping. Setting it to visible does not prevent the element from dragging.it just hide the scroll bar only. what i want was to disabled the scrolling of X axis totally – MVC newbie Feb 27 '17 at 00:56
Why did you set it to `visible`? See **Edit 2** in my answer that suggests using `overflow-x: hidden` on **`#externalevents`** or the parent container, or both. You may also need to set a `max-width`. – Matthew Beckman Feb 27 '17 at 23:27

How do I prevent jQuery dragging from scrolling?

1 Answers1

Edit

Edit 2