Dragging Widget Into Centre of Another Causes Overlap

[alexcason]

Hey,

I've been debugging an issue which causes widgets to overlap. I can replicate it by setting the widgets into the layout as show in the gif below and dragging the long widget down, into the centre of a smaller widget and moving it upwards. The widget below the target then seems to lose positioning and overlap under the first widget in the column. Upon releasing the target it then appears to snap to the bottom of the available grid.

I believe that I've tracked it down to the fn.on_overlapped_row_change function. It seems that the end callback passes through an incorrect row value.

fn.on_overlapped_row_change = function(start_callback, end_callback) {
    .
    .
    .

    for (i = 0; i < last_n_rows; i++) {
        if ($.inArray(this.last_rows[i], rows) === -1) {
            (end_callback || $.noop).call(this, this.last_rows[i]);
        }
    }

    this.last_rows = rows;
};

When I change this to the following, copied from the start callback loop, it seems to resolve the issue.

fn.on_overlapped_row_change = function(start_callback, end_callback) {
    .
    .
    .

    for (i = 0; i < last_n_rows; i++) {
        if ($.inArray(rows[i], this.last_rows) === -1) {
            (end_callback || $.noop).call(this, rows[i]);
        }
    }

    this.last_rows = rows;
};

I have done some testing and this doesn't seem to have had any side affects but I would appreciate a second opinion before submitting a pull request.

[ildarian]

I was having the same issue, I tried your above suggestion and it still did not work for me. What I found, after looking at the example being used on the gridster home page, was that they have no div tags inside the li tags. I replaced my div tags with span instead and the issue went away.

Example:

    <li>
        <div>
            I am broken
        </div>
    </li>

Change to:

    <li>
        <span>
            I am not broken
        </span>
    </li>