jQuery UI Draggable Clone in Scrollable DIV

Question

I've been working on a project that requires me to use jQuery UI drag and drop functionality. When introducing a scrollable div into the mix, my code is not working as intended, any help would be greatly appreciated.

The Goals:

• (Complete) Allow users to drag multiple instances of a smiley or sad face from the ToolBar onto one of the three canvases in the scrollable div. This was done by cloning the helper and removing the orignal droppableShape class.

• (Complete) When a face from the toolbar has been dropped, set the containment of that face to the canvas it was dropped on.

• (Complete) When a face from the toolbar has been dropped, continue to allow the user to move it freely around the canvas it is contained in.

• (Complete) Add the three canvases to a scrollable div for more usability. This is where my problem is introduced

The Problem:

• When I add face tool to my scrollable div, the object scrolls with the div and doesn't not "stick" to the desired canvas that the user dropped it on.

What I have tried and did not help:

// Make shapes droppable
$(".droppableShape").draggable({
     helper:'clone',
     scrollable: false,
     appendTo: '#canvases_area'
});

Here is a fiddle that shows when a face is dropped onto the div, it is static while the canvases scroll. Please let me know if I can provide any further information and thank you for looking at this!

http://jsfiddle.net/fvec4y83/

Answer 1

You're faces element have absolute position style, which means they are dependent on the first relative or absolute parent. In your case this would be the html element. But since you have scroll on your canvases_area, when this scroll, it doesn't affect the html until the canvases_area get to the top or bottom.

You have many ways of solving your problem, you could remove the scroll on canvas_area:

#canvases_area {
    //overflow-y: scroll; 
    height:1120px;
    float: right;
}

Or set its position to absolute. Then you'll have to set top coordinate and adjust z-index so that the draggable face are over it when dragging. Then it would be easier to append to canvases_area, else the calculation to position the element are a bit hard to make. You could do it like this:

#canvases_area {
    overflow-y: scroll; 
    height:1120px;
    float: right;
    position: absolute;
    top:80px;
    z-index:-1;
}

and

var newTop = ui.offset.top-$(this).parent().offset().top+$(this).parent().scrollTop()+(ui.draggable.height()/2)

$(this).parent().append(new_field);
 new_field.css({'top': newTop})

jsfiddle for last one: http://jsfiddle.net/hwrbLx8c/3/