|
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) 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@lists.rubyonrails.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
