Em Te
2006-Jul-24 05:22 UTC
Draggable slow if page contains more than 4 Droppables [testcase]
Good day, I am using Scriptaculous'' drag and drop library in my project and I find that if I have more than 4 Droppables on a page that contains many nested and positioned elements, the motion of any draggable seem to be bumpy instead of smooth. This happens on IE only. To see this in action, copy and paste this testcase into a file: === draggable drop drop drop drop drop === After writing some unit tests, I discovered that Droppables was incurred a bottleneck by having to calculate Position.cumulativeOffset for each droppable on each mouseMove. Because the bumpy behavior was unacceptable to our QA staff, I had to write some optimization code. I achieved this by modifying Droppables.isAffected and Droppables.show to use an implementation of Position.cumulativeOffset that caches the offset values when a flag is set. The flag is set on a per droppable basis and is used to hint to the implementation that the droppable has a static location and therefore its position can be cached. I was wondering if future Scriptaculous releases would benefit from such an optimization. Thank you for your time and you have yourself a nice day. _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Em Te
2006-Jul-24 05:25 UTC
Draggable slow if page contains more than 4 Droppables [testcase]
Good day,
I am using Scriptaculous'' drag and drop library in my project and I
find
that if I have more than 4 Droppables on a page that contains many nested
elements, the motion of any draggable seem to be bumpy instead of smooth.
This happens on IE only.
To see this in action, copy and paste this testcase into a file:
===<html>
<script type="text/javascript"
src="prototype.js"></script>
<script type="text/javascript"
src="scriptaculous.js"></script>
<script type="text/javascript">
function init() {
new Draggable($("dd"));
Droppables.add($("pp"), {hoverclass:"over"});
Droppables.add($("pp2"), {hoverclass:"over"});
Droppables.add($("pp3"), {hoverclass:"over"});
Droppables.add($("pp4"), {hoverclass:"over"});
Droppables.add($("pp5"), {hoverclass:"over"});
}
</script>
<style type="text/css">
div {position:relative}
span {background:silver}
.over {background:gray}
</style>
<body onload="init();">
<div><div><div><div><div><div><div><div><div><div>
<p><span id="dd">draggable</span></p>
<p><span id="pp">drop</span></p>
<p><span id="pp2">drop</span></p>
<p><span id="pp3">drop</span></p>
<p><span id="pp4">drop</span></p>
<p><span id="pp5">drop</span></p>
</div></div></div></div></div></div></div></div></div></div>
</body>
</html>
===
After writing some unit tests, I discovered that Droppables was incurred a
bottleneck by having to calculate Position.cumulativeOffset for each
droppable on each mouseMove. Because the bumpy behavior was unacceptable to
our QA staff, I had to write some optimization code.
I achieved this by modifying Droppables.isAffected and Droppables.show to
use an implementation of Position.cumulativeOffset that caches the offset
values when a flag is set. The flag is set on a per droppable basis and is
used to hint to the implementation that the droppable has a static location
and therefore its position can be cached.
I was wondering if future Scriptaculous releases would benefit from such an
optimization.
Thank you for your time and you have yourself a nice day.
Peter Michaux
2006-Jul-24 05:58 UTC
Re: Draggable slow if page contains more than 4 Droppables [testcase]
On 7/23/06, Em Te <em_te-PkbjNfxxIARBDgjK7y7TUQ@public.gmane.org> wrote:> Good day, > I am using Scriptaculous'' drag and drop library in my project and I find > that if I have more than 4 Droppables on a page that contains many nested elements, the motion of any draggable seem to be bumpy instead of smooth.There has been a lot of talk about this lately on the Yahoo! UI mailing list. The Yahoo! solution was to cache the positions at the start of the drag. This could still cause trouble when scrolling elements are involved and they automatically scroll during the drag. No matter what, a scheme that uses coordinates to determine whether or not the cursor is over a droppable during a drag will always get slower as the number of droppables grows. I discovered a novel solution that doesn''t get slower regardless of the number of droppables because it uses native browser events to determine when a draggable is over a droppable. I have an article about it and a proof of prinicple demo on my blog http://peter.michaux.ca/articles/2006/06/16/donut-dragdrop By using native browser events, you also get the expected behavior for activating the appropriate droppable when nested and overlapping droppables exisit. This is something I haven''t seen handled well in any dragdrop implementation i''ve tried. Peter
Sam Rowe
2006-Jul-24 13:48 UTC
Re: Draggable slow if page contains more than 4 Droppables [testcase]
On Sun, Jul 23, 2006 at 10:58:54PM -0700, Peter Michaux wrote: # On 7/23/06, Em Te <em_te-PkbjNfxxIARBDgjK7y7TUQ@public.gmane.org> wrote: # >Good day, # >I am using Scriptaculous'' drag and drop library in my project and I find # >that if I have more than 4 Droppables on a page that contains many nested # >elements, the motion of any draggable seem to be bumpy instead of smooth. # # There has been a lot of talk about this lately on the Yahoo! UI # mailing list. The Yahoo! solution was to cache the positions at the # start of the drag. This could still cause trouble when scrolling # elements are involved and they automatically scroll during the drag. # # No matter what, a scheme that uses coordinates to determine whether or # not the cursor is over a droppable during a drag will always get # slower as the number of droppables grows. # # I discovered a novel solution that doesn''t get slower regardless of # the number of droppables because it uses native browser events to # determine when a draggable is over a droppable. I have an article # about it and a proof of prinicple demo on my blog # # http://peter.michaux.ca/articles/2006/06/16/donut-dragdrop # # By using native browser events, you also get the expected behavior for # activating the appropriate droppable when nested and overlapping # droppables exisit. This is something I haven''t seen handled well in # any dragdrop implementation i''ve tried. This is a very cool idea! Kudos! Any chance of it being integrated into the existing drag&drop stuff from Scriptaculous?
Ryan Gahl
2006-Jul-24 14:05 UTC
Re: Draggable slow if page contains more than 4 Droppables [testcase]
And for general drag/drop performance tuning, review my lazy loading article from February on this list... http://lists.rubyonrails.org/pipermail/rails-spinoffs/2006-February/002459.html On 7/24/06, Sam Rowe <scriptaculous-NA8LtxyqzOtZdbSWXsKqFg@public.gmane.org> wrote:> > On Sun, Jul 23, 2006 at 10:58:54PM -0700, Peter Michaux wrote: > # On 7/23/06, Em Te <em_te-PkbjNfxxIARBDgjK7y7TUQ@public.gmane.org> wrote: > # >Good day, > # >I am using Scriptaculous'' drag and drop library in my project and I > find > # >that if I have more than 4 Droppables on a page that contains many > nested > # >elements, the motion of any draggable seem to be bumpy instead of > smooth. > # > # There has been a lot of talk about this lately on the Yahoo! UI > # mailing list. The Yahoo! solution was to cache the positions at the > # start of the drag. This could still cause trouble when scrolling > # elements are involved and they automatically scroll during the drag. > # > # No matter what, a scheme that uses coordinates to determine whether or > # not the cursor is over a droppable during a drag will always get > # slower as the number of droppables grows. > # > # I discovered a novel solution that doesn''t get slower regardless of > # the number of droppables because it uses native browser events to > # determine when a draggable is over a droppable. I have an article > # about it and a proof of prinicple demo on my blog > # > # http://peter.michaux.ca/articles/2006/06/16/donut-dragdrop > # > # By using native browser events, you also get the expected behavior for > # activating the appropriate droppable when nested and overlapping > # droppables exisit. This is something I haven''t seen handled well in > # any dragdrop implementation i''ve tried. > > This is a very cool idea! Kudos! > > Any chance of it being integrated into the existing drag&drop stuff > from Scriptaculous? > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Peter Michaux
2006-Jul-24 17:19 UTC
Re: Draggable slow if page contains more than 4 Droppables [testcase]
Hi Sam, Sam Rowe wrote:> Peter Michaux wrote:> > http://peter.michaux.ca/articles/2006/06/16/donut-dragdrop> This is a very cool idea! Kudos!Thanks.> Any chance of it being integrated into the existing drag&drop stuff > from Scriptaculous?I don''t know. My idea is still a bit larval and another guy on the Yahoo! list is talking about improving another aspect of the whole system. One nice thing is the donut drag drop idea can coexist with the normal looping target detection nicely. Peter