Home/ Questions/Q 8640773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T11:21:41+00:00

When a jQueryUI sortable list is in the middle of a dragging operation, is

  • 0

When a jQueryUI sortable list is in the middle of a dragging operation, is there a way to force jQuery to update the position of the placeholder, even if the user is only moving the mouse horizontally? (jQuery’s hit-testing for a vertical sortable seems only to work when the mouse moves vertically too.)

Undocumented or hacky solutions that involve monkeying around with the internals of the sortable, draggable, etc. are OK as a last resort if a documented solution isn’t available.

Here’s more info:

If you drag an item onto the right side of a vertical jQueryUI sortable list, unless you move the mouse up or down the list doesn’t sort. Once you move the mouse up or down (even just 1px!) suddenly the list sorts. Example is at http://jsfiddle.net/f3Lhg/ and excerpted below.

This may seem like a corner case but it’s actually common when connected lists drag sideways from one list to the other. Even if an entire drag isn’t perfectly horizontal, the first 30px-100px might be, leading to unpredictable dragging behavior and lousy user experience. Even though the problem happens more with connected lists, you can easily repro with a single list by dragging out of the list and coming back into the list from the side.

The problem is not browser-specific. Behavior was identical on all browsers I tested with. Also, adding the tolerance option doesn’t solve the problem.

Is this a jQueryUI bug or expected behavior? And are there known workarounds?

BTW, in my app I have connected lists to the right so I can’t use the {axis:'y'} option because that will prevent dragging to the connected lists. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    <style type="text/css">
    .sortable { list-style-type: none; width: 400px; }
    .sortable li { margin: 5px 0; padding: 30px; border: 1px solid #999; }
    .sortable li.placeholder { margin: 0; height: 4px; border: 0; padding: 0; background-color: #800; }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.sortable').sortable({
                placeholder: 'placeholder'
            }).disableSelection();
        });
    </script>
</head>
<body>
    <ul class="sortable">
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
    </ul>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looking at the jQuery UI source code this appears to be expected behavior.

    Based on how the axis property value is set (or not), jQuery UI sets a property floating as a boolean flag to track whether your container is a vertical or horizontal list (line 46):

    //Let's determine if the items are being displayed horizontally
this.floating = this.items.length ? o.axis === 'x' || (/left|right/).test(this.items[0].item.css('float')) || (/inline|table-cell/).test(this.items[0].item.css('display')) : false;

    This value is used to determine how jQuery UI handles collision detection while the user is dragging an element.

    Specifically:

    The method _intersectsWithSides (line 492) uses the property floating to determine that you are not dragging in a horizontal list and so returns the vertical collision results. The vertical collision check only returns true if there is both a vertical drag direction and an intersection of elements:

    if (this.floating && horizontalDirection) {
    return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
} else {
    return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf));
}

    It may be possible to resolve your issue by removing the verticalDirection requirement from the return conditional in _intersectsWithSides (it might also cause unanticipated buggy behaviors).

    Alternatively:

    You can try editing the plugin’s _intersectsWithSides method to return true if there is either a vertical OR horizontal drag:

    return (verticalDirection || horizontalDirection) && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)) || ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
    • 0