jQuery UI Sortable item jump on start

Question

Hy guys, I have a weird issue witj jQuery sortable that I don't know how to solve.

I have created a fiddle here: http://jsfiddle.net/44LgX/

My js code:

jQuery( document ).ready( function() {

$( '.v-content-container' ).sortable({
    placeholder : 'v-column-placeholder',
    start       : function( e, ui ){
        ui.placeholder.width( ui.item.width() );
        ui.placeholder.height( ui.item.height() );
    }
});

});

Basically, each row consists of two columns which are sortable within that single row. Why 3 rows? Just for demo purposes, count does not matter.

Now, you can demo the issue by trying to drag the second column to first position. You will notice that immediately after you start dragging, the element will jump off the pointer to the bottom left part of the screen.

Now, I did some digging, and it seems I am not the only one with this issue. Proposed solution was to use helper: clone as a sortable parameter, but that does not fit my needs and I also want to solve my original issue, rather than going around it.

Any help or insight is wellcome, thanks!

Answer 1

this is more a place to get started, as I have to head out to a meeting.

when i get rid of all your css, there is no problem. fiddle with bare bones css

however, it looks like crap. how to find the offending css? i go binary search. get rid of half the css, still have a problem --> no, add in 1/2 of the remaining missing css --> yes, remove 1/2 the loaded css. repeat until you get close to the offending lines.

I'm looking for the offending css atm, but if you beat me to it feel free to post your own answer. so far the 'clicking moves the item' issue appears because of these lines. :

.v-row-fluid .v-span12 {
    width: 100%;
    *width: 99.94680851063829%;
}

.v-row-fluid .v-span11 {
    width: 91.48936170212765%;
    *width: 91.43617021276594%;
}

.v-row-fluid .v-span10 {
    width: 82.97872340425532%;
    *width: 82.92553191489361%;
}

.v-row-fluid .v-span9 {
    width: 74.46808510638297%;
    *width: 74.41489361702126%;
}

.v-row-fluid .v-span8 {
    width: 65.95744680851064%;
    *width: 65.90425531914893%;
}

.v-row-fluid .v-span7 {
    width: 57.44680851063829%;
    *width: 57.39361702127659%;
}

.v-row-fluid .v-span6 {
    width: 48.93617021276595%;
    *width: 48.88297872340425%;
}

.v-row-fluid .v-span5 {
    width: 40.42553191489362%;
    *width: 40.37234042553192%;
}

.v-row-fluid .v-span4 {
    width: 31.914893617021278%;
    *width: 31.861702127659576%;
}

.v-row-fluid .v-span3 {
    width: 23.404255319148934%;
    *width: 23.351063829787233%;
}

.v-row-fluid .v-span2 {
    width: 14.893617021276595%;
    *width: 14.840425531914894%;
}

.v-row-fluid .v-span1 {
    width: 6.382978723404255%;
    *width: 6.329787234042553%;
}

Answer 2

zoom and scale/scale3d cause this. Refer to this question.

The reason ? jQuery-ui doesn't factor scale values into its drag offsets.