Home/ Questions/Q 7946089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:03:01+00:00

Firstly, the example: http://jsfiddle.net/Koviko/92PZZ/ Here, I use jQuery UI’s draggable plugin to allow a

  • 0

Firstly, the example: http://jsfiddle.net/Koviko/92PZZ/

Here, I use jQuery UI’s draggable plugin to allow a container to be dragged horizontally. I have also made the second child element include a scrollbar. The issue is that different browsers handle the usage of this scrollbar differently. I’ve tested it in IE8 and the latest stable builds of Chrome and Firefox.

There are two test use cases for the desired behavior:

  1. clicking and holding the mouse on the scrollbar and moving vertically, and
  2. clicking and holding the mouse of the scrollbar and moving horizontally.

First use case (vertical movement):

IE8 and Firefox: No issues.

Chrome: Once you release the mouse button, moving your mouse will cause the container to drag with your mouse cursor. Releasing the container requires you to move your mouse off of the scrollbar (underneath, outside of the container) and then attempt to drag.

Second use case (horizontal movement):

IE8: Horizontal dragging will cause nothing to move at all.

Firefox: Horizontal dragging causes the container to move.

Chrome: Horizontal dragging causes the container to move and, as with vertical scrolling, does not release the drag after the mouse button is released. It is cleared the same way.

So, basically, Chrome’s behavior is the issue. I would be accepting of the behavior in Firefox or IE8. Is there a way to force this behavior from Chrome?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is demonstrated in this Fiddle: http://jsfiddle.net/FGXnR/

    The solution is given in this answer: Using jQuery UI Draggable, how to avoid drag when using scrollbar?

    Basically, use the handle: option to specify a specific thing to drag.

    • 0