Connecting a Draggable to Sortable causes helper element to jump

4
votes

I have a jQueryUI draggable object and a sortable object on the page.

Dragging an element from the draggable to the sortable causes the dragged element to jump up to the top left of the page.

Here's the demo: http://jsfiddle.net/travisrussi/aBhDu/1/

To reproduce:

  • Drag 'Item 5' from the draggable div (top box) to the sortable div (bottom box)

Actual result:

It appears the dragged element switches from relative to absolute positioning. The dragged 'li' switches from: 

<li class="ui-state-default ui-draggable" style="position: relative; left: 52px; top: 9px;">Item 3</li>

to this:

<li class="ui-state-default ui-draggable ui-sortable-helper" style="position: absolute; left: 67px; top: 91px; width: 80px; height: 20px;">Item 3</li>

when the draggable item is dragged into the sortable object.

This is the relevant snippet from jQueryUI 1.8.12 (starts at line 3041):

//The element's absolute position on the page minus margins
this.offset = this.currentItem.offset();
this.offset = {
    top: this.offset.top - this.margins.top,
    left: this.offset.left - this.margins.left
};

// Only after we got the offset, we can change the helper's position to absolute
// TODO: Still need to figure out a way to make relative sorting possible
this.helper.css("position", "absolute");
this.cssPosition = this.helper.css("position");

$.extend(this.offset, {
    click: { //Where the click happened, relative to the element
        left: event.pageX - this.offset.left,
        top: event.pageY - this.offset.top
    },
    parent: this._getParentOffset(),
    relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
});

//Generate the original position
this.originalPosition = this._generatePosition(event);
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;

Is there some configuration option I'm not using?

Is there an issue with the CSS?

Or is this a bug in jqueryUI?

2
jqueryjquery-uidrag-and-dropjquery-ui-sortablejquery-ui-draggable
Did you link to the correct fiddle? I see a different layout in the demo than in your screenshot. – Andrew Whitaker
@Andrew: Thanks for pointing that out. The link has been fixed. – Travis Russi
Looks like the JS isn't working--On closer inspection it looks like the script is expecting different HTML? Not sure. – Andrew Whitaker

2 Answers

4
votes

The primary cause of the jump was that the 'helper' option of the draggable was not set to 'clone'. If you use a clone helper, the jumping problem goes away.

If you need to use the 'original' helper setting, you will still have the jumping issue. One possible solution for it could be to use a custom helper option, as highlighted here: jQueryUI Draggable Helper Option Help. The idea would be to convert the position from relative to absolute at the time the helper is created.

Here's a link to the working demo using a 'clone' helper: http://jsfiddle.net/travisrussi/aBhDu/

3
votes

It seems a custom helper function solves this problem, like this:

        $( ".draggable" ).draggable({
            connectToSortable: "#sortable",
            //helper: "original",
            revert: "invalid",
            helper: function() {
                return $(this);
            }
        });