Draggable object goes outside the container when the window is resized

Question

I try to made a custom scrollbar using the drag&drop/draggable function in JQueryUI

I made this JSFiddle:

HTML

<div id="scrollbar-zone" class="w85pc">
  <div id="scrollbar" style=""></div>
</div>

CSS

.w85pc{
  width: 80%;
  margin: 0 auto;
}

#scrollbar-zone{
    border: 1px solid black;
    height: 30px;
}

#scrollbar{
    border: 1px solid red;
    height: 100%;
    width: 10px;
}

Javascript

$("#scrollbar").draggable({
    axis: "x",
    containment: 'parent'
});

It works fine, but sometimes when I resize the window, the draggable object goes outsite the parent element, and I want to avoid that.

What's the easiest way to fix this problem? I could use the resize() event but there's maybe a better solution.

@TimB Thanks for your answer, if no one has a better solution, I'll use resize. — Pascal Goldbach, May 19 '16 at 16:16

score 3 · Accepted Answer · answered May 19 '16 at 16:53

3

You can convert the position to percentage on stop event, so when resizing the scrollbar will keep its proportional position. Like this:

$("#scrollbar").draggable({
  axis: "x",
  containment: 'parent',
  stop: function(e, ui) {
    var perc = ui.position.left / ui.helper.parent().width() * 100;
    ui.helper.css('left', perc + '%');
  }
});

http://jsfiddle.net/axmgm2j2/

answered May 19 '16 at 16:53

Julien Grégoire

16,864
4
32
57

I was just thinking about this solution, then I saw your answer. Thank you very much :) – Pascal Goldbach May 19 '16 at 17:25
This only works if the draggable is in percentage, not pixels. – Abdul Sadik Yalcin Mar 14 '19 at 13:43

Draggable object goes outside the container when the window is resized

1 Answers1

Linked