Donut DragDrop Release

Brilliant! I love it! I have one problem. Sometimes on IE6 I get into an infinite loop between handleMouseUp and handleMouseMove in DragManager. handleMouseUp() has an "Internet Explorer hack to see if button was released outside of window", which calls handleMouseMove(), which calls handleMouseUp(), which calls...

I worked around it by adding a "skipCheck" boolean parameter to handleMouseMove(), and passing true when making the call to handleMouseMove() in handleMouseUp(). If skipCheck is true, I don't do the IE hack check.

I also have a suggestion. I added a few lines in DragManager.js:

isDraggable: function(element) {
  return (YAHOO.util.Dom.hasClass(element, "draggable")) ? true : false;
},

////////////// START NEW ////////////////  
isNonHandleArea: function(element) {
  return (YAHOO.util.Dom.hasClass(element, "nonHandleArea")) ? true : false;
},
////////////// END NEW ////////////////

// returns a draggable HTMLElement
onDraggable: function(e) {
      var targ = YAHOO.util.Event.getTarget(e);
  while (targ) 
  {
    if (this.isInvalidHandle(targ))
      return null;

    ////////////// START NEW ////////////////      
    if (this.isNonHandleArea(targ)) 
      return null;
    ////////////// END NEW ////////////////

      if (this.isDraggable(targ)) 
      return targ;            

    targ = targ.parentNode;
  }
      return null;
},

Now, within a "draggable" container element, I can declare "nonHandleArea" elements (ie class="nonHandleArea"). These elements will not be draggable, but they will drag if a draggable part of the overall container is dragged. This could be useful, for example, in making a "window" that can be dragged only by its "title bar". Just declare the window border "draggable" and the inside content area "nonHandleArea".

Carl,

I'm glad you like it. Thanks for the comment.

I was uncomfortable with the IE hack for the simple reason that it is a hack and the way it was done was very brittle. Also it was the one thing I hadn't tested much and just copied form Yahoo! UI. Bad me. You'll see that in the svn trunk I have commented out this hack.

DragManager.js

Your skip check idea is a good one if you want to keep the hack. I'd have to take a longer look but since this hack is gone for me I'm working on other things. IE is only 60% of the market now, I believe :)

The concept of layers is really important to the minimal design of this dragdrop library. I want DragManager.js to do as little as possible. You'll see in svn it actually does less now than before.

I don't want DragManager.js to know about handles. (There is an exception for links since clicking a link should follow the link instead of start a drag operation.)

So in the spirit of layering the JavaScript I recommend something like the following to add the non-handle area concept on top of DragManager.js. After including the DragManager.js file add this somewhere.

DragManager.prototype.isInvalidHandle = function(element) {
  return ((element.tagName && element.tagName.toLowerCase() === 'a') ||
          YAHOO.util.Dom.hasClass(element, "nonHandleArea")) ? true : false;
}

Now you get what you want, the DragManager.js tested code doesn't need to be touched and potentially break, and the file size doesn't bloat as more people request more features.

This also gives incredible flexibility as you could override isInvalidHandle() so that children of a div with id="asdf" are not handles.

You could get fancier and subclass DragManager and then use a call to superproto() like I have done in a few examples.

svn trunk is in a state of flux but check out the changelog to see what I've changed already and the direction I am going in getting ready for v0.2. There aren't even the interesting moment hooks anymore which put a huge smile on my face. I can just imagine someone asking for a hook in another place in the code. No bloat thanks when OOP makes these things possible without hooks.

Changelog