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

首先,例子: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.

在这里,我使用jQuery UI的可拖动插件来允许容器被水平拖动。我还使第二个子元素包含一个滚动条。问题是不同的浏览器以不同方式处理此滚动条的使用。我已经在IE8和Chrome和Firefox的最新稳定版本中进行了测试。

There are two test use cases for the desired behavior:

期望的行为有两个测试用例:

clicking and holding the mouse on the scrollbar and moving vertically, and

单击并按住滚动条上的鼠标并垂直移动,然后

clicking and holding the mouse of the scrollbar and moving horizontally.

单击并按住滚动条的鼠标并水平移动。

First use case (vertical movement):

IE8 and Firefox: No issues.

IE8和Firefox:没问题。

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.

Chrome:释放鼠标按钮后,移动鼠标将使用鼠标光标拖动容器。释放容器需要您将鼠标从滚动条(下方,容器外)移开,然后尝试拖动。

Second use case (horizontal movement):

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

IE8:水平拖动根本不会导致任何动作。

Firefox: Horizontal dragging causes the container to move.

Firefox:水平拖动会导致容器移动。

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.

Chrome:水平拖动会导致容器移动,并且与垂直滚动一样,释放鼠标按钮后不会释放拖动。它以同样的方式被清除。

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?

所以,基本上,Chrome的行为就是问题所在。我会接受Firefox或IE8中的行为。有没有办法从Chrome强制这种行为?

1 个解决方案

#1

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

这在小提琴中得到了证明:http://jsfiddle.net/FGXnR/

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

解决方案在这个答案中给出:使用jQuery UI Draggable,如何在使用滚动条时避免拖动?

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

基本上,使用handle:选项指定要拖动的特定内容。

#1