2

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!

1
  • Up, I am really stuck. Maybe it is not possible?
    – sdespont
    Feb 21, 2012 at 9:24

1 Answer 1

3

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

3
  • Hi Didier, thank you very much for your answer and for the time that you spent on my problem. Unfortunately, I am still not able to drag my yellow boxes from the row 1 to the row 3 and more in your demo because the main container has the overflow property and the 'clone' option doesn't permit (not sure, in fact I hope not...) to scroll-down
    – sdespont
    Feb 21, 2012 at 10:20
  • I missed that part indeed. I will see if I can come up with something :-) Feb 21, 2012 at 10:25
  • Found out what the problem was. I've updated the fiddle and the answer. Feb 21, 2012 at 10:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.