This one is as much for Thomas as for the rest of the list (might be a
good one for the official build)... I made a change to the dragdrop.js
file that significantly improves overall performance of dragging when
there are more than one (or many more) droppables on the page.
I modified the Draggables.updateDrag method, and added another method
below it, and then in Draggable.updateDrag I removed the call to
Droppables.show... Also, since I am using a version from the SVN trunk,
I removed the (redundant) call to Droppables.show that was in the
Draggable.scroll function. (Thomas, I think you just missed that, but
you had 2 calls to that VERY expensive method for draggables with
scrolling enabled)
The modified functions from the Draggables class are listed below
(remember to also remove the call to Droppables.show that is in
Draggable.updateDrag, and if you are using the SVN version, also remove
it in the Draggable.scroll function). This only processes the droppables
list when the mouse stops moving for a split second (100 milliseconds in
my example below), making dragging perfectly smooth while the mouse is
moving. Feel free to tweak the timing to your taste by changing the
integer initial value of this.mouseMoveTimerValue, or by changing the
timeout values from 50 to your preference.
NOTE: If you use this approach it is best to include a hoverclass for
your droppables (so they become highlighted or otherwise different when
activated)... so your users know for sure that it is safe to drop. This
is the only issue which might make this method not desirable for some of
you (if you really don''t want to have a hoverclass for your
droppables)... however the performance gain from this is amazing for any
of you who have multiple droppables and have been cursing the
performance!
Perhaps Thomas can incorporate this into the main build and somehow
figure out how to circumvent that problem, or allow it to be
configurable so people can choose between the 2 methods...
MODIFIED FUNCTIONS IN THE DRAGGABLES CLASS
updateDrag: function(event) {
if(!this.activeDraggable) return;
var pointer = [Event.pointerX(event), Event.pointerY(event)];
// Mozilla-based browsers fire successive mousemove events with
// the same coordinates, prevent needless redrawing (moz bug?)
if(this._lastPointer && (this._lastPointer.inspect()
=pointer.inspect())) return;
this._lastPointer = pointer;
this.mouseMoveTimerValue = 1;
this.activeDraggable.updateDrag(event, pointer);
if (this.mouseMoveTimer)
clearTimeout(this.mouseMoveTimer)
this.mouseMoveTimer = setTimeout(function() {
this.decrementMouseMoveTimer(); }.bind(this), 50);
},
decrementMouseMoveTimer: function()
{
if (this.mouseMoveTimerValue > 0)
{
this.mouseMoveTimerValue--;
this.mouseMoveTimer = setTimeout(function() {
this.decrementMouseMoveTimer(); }.bind(this), 50);
}
else
{
this.mouseMoverTimer = null;
if (this._lastPointer && this.activeDraggable)
Droppables.show(this._lastPointer,
this.activeDraggable.element);
}
},
Sincerely,
Ryan Gahl
Design Engineer
Camtronics Medical Systems (an Emageon Company)
Ryan.gahl-nlycWCgr5/vuufBYgWm87A@public.gmane.org
262-369-3251
The information transmitted in this electronic mail is intended only for the
person or entity to which it is addressed and may contain confidential,
proprietary, and/or privileged material. Any review, retransmission,
dissemination or other use of, or taking of any action in reliance upon,
this information by persons or entities other than the intended recipient
is prohibited. If you received this in error, please contact the sender and
delete the material from all computers.
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
