Question

I am completely stuck on a drag and drop problem: I need to be able to drag the yellow squares located in the cells of the row 1 into one of the cells of the row 3.

I made a small JS Bin example here

My constraints are that all the cells must have the property “overflow” because the cells can have plenty of yellow squares.

I tried to apply the property “clone / original” and “AppendTo” to the draggable elements, but I didn’t manage to deal with the main container scrollbar which have the property overflow as well.

Any help would be welcome!

Answer 1

For being able to drag the element to another table cell, you need to set the “helper” option to “clone”.

$(this).draggable({
    opacity: 0.7,
    helper: 'clone',
    scroll: false
});

Now in the “drop” event of the droppable, ui.draggable is the element that is being dragged. What you need to do it to append it the droppable.

$(this).droppable({
    ...
    drop: function(event, ui) {
        $(this).addClass("cell-dropped");
        // "ui.draggable" is the element being dragged
        // "this" is the droppable element
        $(ui.draggable).appendTo(this);
    }
});

For the scrolling of the container DIV, you have to explicitly set it’s css position value to relative:

.container{
    ...
    position: relative;
}

DEMO