jQuery Draggable helper position issue when dragging into relatively positioned Sortable list

Question

I have a draggable list that is connected to a sortable list via connectToSortable and everything was working as intended but after the jQuery UI v1.11.2 update the following 2 problems happen:

1) On entering the sortable list the draggable helper slightly repositions in relation to the cursor position.

2) On leaving the sortable list (without dropping in the helper obviously) the draggable helper significantly repositions in relation to the cursor.

I have been doing a bit of testing and have tracked down the cause of the issue. The sortable list is relative positioned.

The helper is always appended to the body but with the 1.11.2 update it is append to the body but when you enter the sortable it is appended to the sortable list.

This project requires relative positioned containers so removing the relative positioning is not an option.

HTML:

<div class="composer">
    <ul>
        <li id="draggable" class="ui-state-highlight">Drag me into sortable list and then back here </li>
    </ul>
</div>
<div class="all-content-holder">
    <div class="all-content-background">
        <div class="all-content">
            <ul id="sortable">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
                <li class="ui-state-default">Item 3</li>
                <li class="ui-state-default">Item 4</li>
                <li class="ui-state-default">Item 5</li>
            </ul>
        </div>
    </div>
</div>

JS

$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});

$("#sortable").sortable({
    revert: true
});

$("ul, li").disableSelection();

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
li {
    margin: 5px;
    padding: 5px;
    width: 150px;
}
.composer {
    width:300px;
    background-color:#ccc;
    position: fixed;
    top: 36px;
    bottom: 0;
    z-index: 9999999;
    font-size:11px;
    line-height: normal;
}
.all-content-holder {
    height: 100%;
    margin-left: 300px;
    margin-top: 36px;
    right: 0;
    bottom: 0;
    overflow: auto;
    min-height: 100%;
}
.all-content-background {
    margin: 0;
    overflow-x: visible;
    position: static;
    width: 100%;
    max-width: 100%;
}
.all-content {
    position: relative;
    width: 100%;
    z-index: 1;
}

I have created the following JSFiddle to replicate the problem: http://jsfiddle.net/bennyticklez/oLowzou6/1/

I have tried numerous fixes to no avail! If somebody could help it would be brilliant.

Thanks in advance

BennyTicklez BennyTicklez · Accepted Answer · 2015-06-04T17:26:07

Turns out this is a bug specifically introduced in version jQuery UI Draggable 1.11.2 and also exists in 1.11.3.

Version 1.11.4 onwards works correctly so upgrading jQuery UI to this version will fix the issue.

I also found that using the 1.11.4 version of Draggable in the 1.11.2 version of jQuery UI fixed the issue and didn't cause any errors that I could find. So if you are stuck using a 1.11.2/1.11.3 version of jQuery (on an outdated CMS etc) just drop the 1.11.4 version of Draggable in and everything should function correctly.

Hope this helps.

jQuery Draggable helper position issue when dragging into relatively positioned Sortable list

1 Answers