jQuery UI Sortable - Strange behaviour - items falling from the top of window on move

jquery ui sortable scroll problem
jquery sortable

I'm experiencing some very strange behaviour with jQuery UI sortable.

I'm using jQuery 1.10.2 and jQuery UI 1.10.3.

In FF the first time you move an item, it works fine but after you have moved it once, when you move it again, it jumps and falls from the top of the window to under your cursor rather than just peeling away from it's position.

In Chrome, this happens irrespective of if you have moved it previously.

Here is my HTML:

<ul class="trackListings" id="trackListings">
    <li class="header">
        <div class="number">#</div>
        <div class="title">Title</div>
        <div class="length">Length</div>
        <div class="plays">Plays</div>
        <div class="adds">Adds</div>
        <div class="toggle"></div>
    </li>
    <li id="369">
        <div class="number">1</div>
        <div class="title">Test track</div>
        <div class="length">1:25</div>
        <div class="plays">0</div>
        <div class="adds">0</div>
        <div class="toggle"><span>&gt;</span></div>
        <div class="actions">Purchase Link: <input placeholder="e.g iTunes, Amazon etc" value="" type="text"></div>
    </li>

    <li id="370">
        <div class="number">2</div>
        <div class="title">Test track 2</div>
        <div class="length">1:29</div>
        <div class="plays">0</div>
        <div class="adds">0</div>
        <div class="toggle"><span>&gt;</span></div>
        <div class="actions">Purchase Link: <input placeholder="e.g iTunes, Amazon etc" value="" type="text"></div>
    </li>
</ul>

Appropriate CSS:

.trackListings{
    padding:0;

}
.trackListings li{
    line-height: 50px;
    display: inline;
    display: block;
    border-bottom: 1px solid #afb2b4;
    position: relative;
    font-size: 21px;
    color: #000;
    transition:.25s linear all;
}

.trackListings li:after{
    clear: both;
    display: block;
    content: " ";
}
.trackListings li div{
    float: left;
}
.trackListings li div.number{
    text-align: center;
    width: 45px;
}

.trackListings li div.title{
    width: 465px;
    padding-left: 20px;
}

.trackListings li div.length{
    width: 110px;
}

.trackListings li div.plays{
    width: 100px;
}

.trackListings li div.adds{
    width: 210px;
}

.trackListings li div.toggle span{
    font-size: 30px; 
    display: block;
}

.trackListings li.active div.toggle span{
    color: #e35b29;
}
.trackListings li div.actions{
    display: none;
}

And am initialising it like so:

$('#trackListings').sortable({
                items: 'li:not(.header)'
            });

I've tried removing the containing divs and setting a fixed height on the lis. Also have tried wrapping in a relatively positioned div but this caused it to happen every time in FF too.

I came across something similar to this a while ago, and documented here: http://blog.ricky-stevens.com/jquery-sortable-offset-bug/ and it has since been discussed here: http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff

It might be related. This affects jQuery Sortable if you have to scroll on the page. Try adjusting the scroll-y properties on the body tag.

jQuery sortable - item sometimes disappears on drop, In my code, I defined the accordion "content panel" as a sortable, and that's where the strange behavior comes from. I have to create a sortable container and put  This option is a Selector that identifies another sortable element that can accept items from this sortable. This allows items from one list to be moved to other lists, a frequent and useful user interaction. If omitted, no other element is connected. This is a one-way relationship. By default its value is false.

I was able to fix the behaviour in FF by using the helper:"clone" option of sortable. It goes some way to fixing in chrome but still not perfect

Sortable: Intermittently unable to sort while dragging and , Try and move item 1 down to bottom and you will see the placeholder will fail and cannot be dropped, moving it around a bit seems to fix it. Summary: sortable: Strange behaviour on big item and overflow:scroll When you scroll and scrollLeft or scrollTop of container changes, positions of sortable items (i.e. top and left )  I'm using the jQuery UI sortables plugin to allow re-ordering of some list items. Inside each list item, I've got a couple of radio buttons which allow the item to be enabled or disabled.

I know this is a incredibly old, but I came across this issue today. The fix is to remove:

position: relative;

from the css on the list item. I hope this helps someone.

#9635 (Sortable: Item flying off screen with revert=true) – jQuery UI, When you're dropping a list item on a scrolled page, the item flies off screen by the if ( !axis || axis === "y" ) { animation.top = cur.top - this.offset.parent.top  $( "#sortable" ).sortable({ // force the cursor position, or the offset might be wrong cursorAt: { left: 50, top: 45 }, helper: function (event, item) { // make sure at least one item is selected.

I know this is a very old one, but for me it fixed it by not using "revert: true".

Sorting drops items in wrong spot or duplicates items · Issue #152 , Items end up in different spots from where I dropped them, items are Which specific problem behavior happens seems to depend on which items were dropped and I am using latest knockout.sortable, jQuery 2.2.1 and jQueryUI 1.11.4. adding them again when moving an item within it's current list #83. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Draggable Elements That Push Others Out Of Way, Time tested tools like jQuery UI offer Draggable (and other similar methods) to make revert: true, scroll: false, placeholder: "sortable-placeholder", cursor: "​move" }); position = item.position(); item_clone .css({ left: position.left, top: position.top, It looks very nice and polished, but I got this weird behaviour in FF 27 when  The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Note: In order to sort table rows, the tbody must be made sortable, not the table.

Getting and setting max zIndex with jQuery, When dragging and moving windows around the page it's often critical to ensure such a way that the last dropped window/element ends up on top of the zIndex stack. A long time ago (prior to jQuery Ui) I built my own draggable plug-in and one of the main things it did is upon dropping it would elevate  Move the square in order to its top-left corner match the top-left corner of the container. JQuery UI Sortable strange placeholder behaviour Any ideas as to

Accessible Drag and Drop with Multiple Items, These can take a value such as "copy" or "move" , and are supposed to The purpose of that behavior is to simplify the interactions for users, screen readers don't continue to announce them as draggable items. That would cause the focus position to be reset back to the top of the Strange but true! The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Note: In order to sort table rows, the tbody must be made sortable, not the table.

Comments
  • Can you post a fiddle if this is not yet resolved
  • Unfortunately that was a different issue. I have noticed however that when an item has moved to a new position it has position: relative; left: 0px; top:0px; when I remove this in firebug, I'm able to redrag it from it's current position....