CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Justin Grant
Justin Grant

Reputation: 46663

jqueryUI sortable: how to force update of placeholder position while dragging

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>

Upvotes: 4

Views: 3486

Answers (2)

Chi-chi
Chi-chi

Reputation: 181

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));

Upvotes: 2

jampez77
jampez77

Reputation: 5231

I'm sorry, Maybe I have misread something here.

Are you saying the problem is that if you grab the first list item drag it all the way to the right, out of the list and then drag it to item#4 it doesn't choose the relevant finishing position until you move the cursor at least 1px up or down?

Cause if so I really don't think it is a serious useability problem at all. I replicated the example as i described above and it required me to be VERY careful in order to move the mouse perfectly horizontally.

Plus I think the instinct of all users will be to drag the items and move them vertically instead of horizontally anyway.

Upvotes: 0

Related Questions