Performance issues with large numbers of drag handles

[dwhalen]

Hi 3wme.

Thanks for your help in the past. My d-n-d app is really working
great thanks to your cool plugins. I appreciate your hard work!

I have a performance issue that I could use your advice on. I have a
scrolling DIV that holds draggable items within it. I bind the drag
events to these items when they render. When the number of items in
the DIV are small (< 100) the bind time is really fast and I have no
problems.

But if the number of items in the DIV gets large (> 500), the amount
of time and memory to bind the drag events to these items takes
forever.

I'm wondering if there's a system to help me manage drag handles that
are not on the screen. Sort of like the dropManager you have for drop
zones, but in this case it deals with drag handles that are on the
screen only?

Or, maybe you can give me some advice on how I can dynamically bind
the drag events so that only the items that are visible within the
scrolling DIV are bound?

Thanks again, and I appreciate your help.

Dave W

[dwhalen]

*bump*

Just hoping for some insight. Not asking you to solve the issue for
me. Any ideas on where to start
looking would be very helpful.

Thanks!

DW

[3wme]

Sure, sorry for the delay. The idea you suggest (tracking visible
elements) makes for good theory, but in practice involves a whole lot
of constant computation and calculation. I just cannot see that
equating into a performance benefit.

However, if you simply need to bind drag events to a large number of
elements, I would recommend a little delegation. Bind the drag events
to a common ancestor element of all of the draggable elements. In the
"dragstart" handler determine if the event.target matches something
you want to allow to drag. If not, return false, if so, return the
element and this becomes the "dragProxy". Then use the "dragProxy"
event property in the rest of the drag/drop interactions instead of
the "dragTarget" property. The "drop" events will automatically use
the "dragProxy" for tolerance calculations if you return one in the
"dragstart" handler.

$('div.parent').bind("dragstart",function( ev ){
var $elem = $( ev.target ).closest(".draggable");
return $elem.length ? $elem : false;
}).bind("drag",function( ev ){
$( ev.dragProxy ).css({
top: ev.offsetY,
left: ev.offsetX
});
});

Hope this helps.

[dwhalen]

I'll *definitely* try that! Thanks for the head start!

> > > Dave W- Hide quoted text -
>
> - Show quoted text -

[Martin Makundi]

$('div.parent').bind("dragstart",function( ev ){

   var $elem = $( ev.target ).closest(".draggable");
   return $elem.length ? $elem : false;
}).bind("drag",function( ev ){
   $( ev.dragProxy ).css({
      top: ev.offsetY,
      left: ev.offsetX
   });
});

Mine required:

    $(dd.proxy).css({top:ev.pageY, left:ev.pageX });