Loading ...
Sorry, an error occurred while loading the content.

2358Re: [ydn-javascript] research: why YUI dragdrop is so slow

Expand Messages
  • Tim Hosking
    Jun 17, 2006
      On 17 Jun 2006, at 04:32, Peter Michaux wrote:

      > Hi Tim,
      >
      > What I was trying to get at is why do you have to cache 1000 element
      > locations and/or regions. You only need to cache the items you will
      > drag and their possible targets. Could you somehow rework the problem
      > so this is just a few things at the start of each drag?

      Because there may be 1000 draggable items. I'm not doing the caching,
      YUI is.

      > This would require creative CSS. I haven't tried this yet but maybe
      > you could use the clipping and/or overflow control features of CSS.
      > Put some of the things you want to clone in each of the four donut
      > divs and then when the donut is assembled things would look normal
      > with a one or more pixel hole in the middle. That is my idea anyway.

      The only problem I can see with this is that you would have to make
      the dragged object jump shift at the start off the drag to align the
      hole with the mouse cursor. This may not look so bad with a small,
      squarish object, but with a long, narrow object, like a line of
      textual data, the jump could be significant, and make it look really
      jerky.

      > Maybe I'm missing something. I haven't ever used firebug.

      Oh you really should. It's free (maybe because it's priceless)

      > Here is an
      > example that shows that the mouseover event does not fire while
      > dragging an element under the cursor.
      >
      > http://peter.michaux.ca/examples/donut-dragdrop/event-test.html
      >
      > That example convinces me that the mouseover doesn't fire.

      Interesting. I notice you use YAHOO.util.DD. I just changed my code
      to use it, and as you say, I don't see mouseover events. I have been
      using YAHOO.util.DragProxy, and guess what. Yep, it *does* generate
      the mouseover events .... try it. Obviously DD & DragProxy are doing
      things differently, one of which is not good. Here's a suggestion.

      Create a subclass of YAHOO.util.DragProxy and override startDrag() to
      do something like this:-

      var proxy = this.getDragEl();
      var len = proxy.childNodes.length;

      for(var i = 0; i < len; i++) {
      proxy.removeChild( proxy.childNodes[ i ] );
      }

      var element = this.getEl().cloneNode( true );
      proxy.style.border = "";
      proxy.style.borderStyle = "none";
      proxy.appendChild( element );

      Also, if you wish, hide you original element and show it again on
      mouseup. This should give you solid dragging (or translucent if you
      add a style to the proxy element), and mouseover events.


      > The dragdrop library always holds the id's of all draggable elements.
      > refreshCache should not have to look for these items.
      >
      > refreshCache calls getLocation which calls getEl. If you haven't
      > called getEl for each draggable yet then maybe that is taking some
      > time: all the document.getElementById() calls. You could do this after
      > each draggable instance is created. As part of your Draggable subclass
      > constructor. I think Draggable's constructor should do this anyway.
      > Probably the getXY call in getLocation is the really slow problem. If
      > you know the geography of your list items (height etc) perhaps you
      > could do getXY for the first element and then just increment these
      > values for the others in the list

      Aha! That actually worked! Thank you! What a stupid problem :-)

      > Peter

      Tim
    • Show all 15 messages in this topic