Drag dynatree node outside of scrolling region

Question

I'm working with a drag and drop dynatree example somewhat similar to the one shown here, in that my tree has dnd enabled and is contained inside of a scrollable region. However, in that example when you try to drag a node outside the scrollable area, the area will just expand so that you remain constrained to that area. I would instead like to be able to drag the dynatree node outside the scrolling region.

If I were applying this functionality to an arbitrary element inside of a scrolling region, I would do the following:

$("#dndelement").draggable({
    helper: "clone",
    appendTo: "body" 
});

I suspect I can do something similar in the dynatree case, but I don't know how I would actually implement this with dynatree's built-in drag and drop system.

EDIT

Also, the tree nodes are populated via AJAX, so they don't all exist when the page is initially loaded.

Zack Zack · Accepted Answer · 2012-10-26T13:19:47

Do you have the dynatree in a div with style="overflow: scroll; enabled? If so, remove that and set a fixed height and width.

<div id="tree" style="height:200px; width:30%">

</div>

There is an option that I'm pretty sure is already enabled in the dyantree UI that contains the tree in the div you put it in and creates scroll bars only when needed, as long as you put a fixed height and width.

If this is not what you are looking for, post some code and pictures and I'd be happy to dig into this further for you!

Drag dynatree node outside of scrolling region

1 Answers