Geek Answers Handbook

Connecting Draggable to Sortable causes the transition of the auxiliary element

I have a jQueryUI drag and drop object and a sortable object on the page.

Dragging and dropping an element from a dragged object to a sortable one causes the element to be dragged up in the upper left corner of the page .

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

Playback:

  • Drag the "5" element from the draggable div (upper drawer) to the sortable div (lower drawer)

Actual result:

It seems that the draggable items are switched relative to absolute positioning . The draggable "li" switches from:

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

:

 <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 a dragged item is dragged into a sortable object.

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

 //The element 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 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 kind of configuration parameter that I am not using?

Is there a problem with CSS?

Or is this a bug in jqueryUI?

+4
source share
2 answers

The main reason for the jump was that the "helper" option for draggable was not set to "clone". If you use a helper clone, the jumping problem disappears.

If you need to use the "original" helper setting, you will still have a problem with the jump. One possible solution for it might be to use a custom helper option, as shown here: jQueryUI Draggable Helper Option Help . The idea would be to transform the position relative to absolute at the time the helper was created.

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

+4
source

It seems a custom helper function solves this problem, for example:

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

More articles:


All Articles