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

Re: [ydn-javascript] Dragdrop perfomance

Expand Messages
  • Nige White
    ... I do it in a similar way. In my example at https://secure0.forward-comp.co.uk/yui/examples/treeview/fcl.html I implement onDragEnter, onDrag, onDragDrop
    Message 1 of 9 , Jun 1, 2006
    • 0 Attachment
      Peter Michaux wrote:

      >> The boolean isTarget can be set to false, then the DD instance is not a
      >> target.
      >>
      >>
      >
      >Thanks for the info. I'll try this. So when I am dragging the libary
      >only looks for interactions with possible targets? That would be nice
      >and efficient like I was trying for with the groups games I was
      >playing.
      >
      >
      >
      >> I think that the pattern used by the YAHOO DragDrop library might be
      >> slightly flawed.
      >>
      >> To me, there should be a difference between a draggable object, and a
      >> target object.
      >>
      >> The drag events (onDragEnter, onDrag, onDragDrop and onDragOut) should
      >> be delivered to the draggable (as now), *and* the target. The target
      >> should get to decide what kind of action needs to be taken. The
      >> draggable probably doesn't know enough to actually implement any of
      >> these handlers. The *target* would do drop position highlighting, change
      >> the cursor type to indicate whether drop is possible, and handle the
      >> drop event creating a new object, and HTMLElement of it's own choosing.
      >>
      >> I have implemented this pattern on top of the current library in my
      >> DDTreeView/Draggable implementation, but I think that should be the
      >> pattern the library uses.
      >>
      >>
      >
      >I agree it seems a little strange but I don't think it is a disaster.
      >In my onDragEnter, onDragOut etc methods I have some "hey you" calls
      >to get the target to pay attention. Things like
      >
      >Draggable.prototype.onDragEnter = function(e, id) {
      > YAHOO.util.getDDById(id).heyYou();
      > //..do other stuff
      >};
      >
      >If the onDragEnter was delivered to the both the draggable and the
      >target then which one will fire first? It might be better the way it
      >is so that we can know the order things happen. I'm curious how you
      >did implement it however.
      >
      >For you draggabble tree, did you make it so that items in an
      >individual node can be reordered or just that items can be moved from
      >node to node. I am looking at sortable lists too and will have to do
      >something different than the Yahoo! example. I don't want the
      >individual items to be targets. I want the node to be the target since
      >the node's HTMLelement might be much bigger than the few elements
      >inside.
      >
      I do it in a similar way. In my example at
      https://secure0.forward-comp.co.uk/yui/examples/treeview/fcl.html

      I implement onDragEnter, onDrag, onDragDrop and onDragOut in my
      DDTreeView. When I construct the DDTarget for this, I override those
      methods in the DDTarget to call the corresponding events in the scope of
      the DDTreeView, so it's as if the DDTreeView *is* the target:

      // Make the tree droppable on. Extend this DDTreeView object to
      look like a DDTarget.
      this.ddTarget = new YAHOO.util.DDTarget(this.id, "menuTree");
      var _this = this;
      this.ddTarget.onDragEnter = function()
      {
      _this.onDragEnter.apply(_this, arguments);
      };
      this.ddTarget.onDragOver = function()
      {
      _this.onDragOver.apply(_this, arguments);
      };
      this.ddTarget.onDragDrop = function()
      {
      return _this.onDragDrop.apply(_this, arguments);
      };
      this.ddTarget.onDragOut = function()
      {
      _this.onDragOut.apply(_this, arguments);
      };

      It's a bit like my idea of being able to register any object as a
      DDTarget (as long as they implement these methods).

      The Draggable object (an extension of DDProxy) delivers the event, and
      itself to the target (the DDTreeView) on each of these events:

      /**
      This informs the recipient that it has been dropped upon.
      @return The object created as a result of the drop. It will be null
      if the target does not accept
      the drop.
      */
      Draggable.prototype.onDragDrop = function(e, id)
      {
      this.target = ((typeof id == "string") ?
      YAHOO.util.DragDropMgr.getDDById(id) : id[0]);
      return this.target.onDragDrop(e, this);
      };


      Nige

      _____________________________________________________________________
      This message has been checked for all known viruses. Virus scanning
      powered by Messagelabs http://www.messagelabs.com For more information
      e-mail : hostmaster@...
    Your message has been successfully submitted and would be delivered to recipients shortly.