dojo/dnd/Mover.js

• Provides:

  • dojo.dnd.Mover

• dojo.dnd.Mover

  • type

    Function

  • parameters:
    • node: (typeof Node)

      a node (or node's id) to be moved

    • e: (typeof Event)

      a mouse event, which started the move;
      only pageX and pageY properties are used

    • host: (typeof Object)

      object which implements the functionality of the move,
      and defines proper events (onMoveStart and onMoveStop)

  • source: [view]
      this.node = dojo.byId(node);
      var pos = e.touches ? e.touches[0] : e;
      this.marginBox = {l: pos.pageX, t: pos.pageY};
      this.mouseButton = e.button;
      var h = (this.host = host), d = node.ownerDocument;
      this.events = [
       // At the start of a drag, onFirstMove is called, and then the following two
       // connects are disconnected
       dojo.connect(d, "onmousemove", this, "onFirstMove"),
       dojo.connect(d, "ontouchmove", this, "onFirstMove"),
    
    
       // These are called continually during the drag
       dojo.connect(d, "onmousemove", this, "onMouseMove"),
       dojo.connect(d, "ontouchmove", this, "onMouseMove"),
    
    
       // And these are called at the end of the drag
       dojo.connect(d, "onmouseup", this, "onMouseUp"),
       dojo.connect(d, "ontouchend", this, "onMouseUp"),
    
    
       // cancel text selection and text dragging
       dojo.connect(d, "ondragstart", dojo.stopEvent),
       dojo.connect(d.body, "onselectstart", dojo.stopEvent)
      ];
      // notify that the move has started
      if(h && h.onMoveStart){
       h.onMoveStart(this);
      }
  • summary

    an object which makes a node follow the mouse, or touch-drag on touch devices.
    Used as a default mover, and as a base class for custom movers.

• dojo.dnd.Mover.onMouseMove

  • type

    Function

  • parameters:
    • e: (typeof Event)

      mouse/touch event

  • source: [view]
      dojo.dnd.autoScroll(e);
      var m = this.marginBox,
       pos = e.touches ? e.touches[0] : e;
      this.host.onMove(this, {l: m.l + pos.pageX, t: m.t + pos.pageY}, e);
      dojo.stopEvent(e);
  • summary

    event processor for onmousemove/ontouchmove

• dojo.dnd.Mover.onMouseUp

  • type

    Function

  • parameters:
    • e: (typeof )
  • source: [view]
      if(dojo.isWebKit && dojo.isMac && this.mouseButton == 2 ?
        e.button == 0 : this.mouseButton == e.button){ // TODO Should condition be met for touch devices, too?
       this.destroy();
      }
      dojo.stopEvent(e);
  • summary

• dojo.dnd.Mover.onFirstMove

  • type

    Function

  • parameters:
    • e: (typeof )
  • source: [view]
      var s = this.node.style, l, t, h = this.host;
      switch(s.position){
       case "relative":
       case "absolute":
        // assume that left and top values are in pixels already
        l = Math.round(parseFloat(s.left)) || 0;
        t = Math.round(parseFloat(s.top)) || 0;
        break;
       default:
        s.position = "absolute"; // enforcing the absolute mode
        var m = dojo.marginBox(this.node);
        // event.pageX/pageY (which we used to generate the initial
        // margin box) includes padding and margin set on the body.
        // However, setting the node's position to absolute and then
        // doing dojo.marginBox on it *doesn't* take that additional
        // space into account - so we need to subtract the combined
        // padding and margin. We use getComputedStyle and
        // _getMarginBox/_getContentBox to avoid the extra lookup of
        // the computed style.
        var b = dojo.doc.body;
        var bs = dojo.getComputedStyle(b);
        var bm = dojo._getMarginBox(b, bs);
        var bc = dojo._getContentBox(b, bs);
        l = m.l - (bc.l - bm.l);
        t = m.t - (bc.t - bm.t);
        break;
      }
      this.marginBox.l = l - this.marginBox.l;
      this.marginBox.t = t - this.marginBox.t;
      if(h && h.onFirstMove){
       h.onFirstMove(this, e);
      }
    
      
      // Disconnect onmousemove and ontouchmove events that call this function
      dojo.disconnect(this.events.shift());
      dojo.disconnect(this.events.shift());
  • summary

    makes the node absolute; it is meant to be called only once.
    relative and absolutely positioned nodes are assumed to use pixel units

• dojo.dnd.Mover.destroy

  • type

    Function

  • source: [view]
      dojo.forEach(this.events, dojo.disconnect);
      // undo global settings
      var h = this.host;
      if(h && h.onMoveStop){
       h.onMoveStop(this);
      }
      // destroy objects
      this.events = this.node = this.host = null;
  • summary

    stops the move, deletes all references, so the object can be garbage-collected

• dojo.dnd.Mover.mouseButton

  • summary

• dojo.dnd.Mover.marginBox.l

  • summary

• dojo.dnd.Mover.marginBox.t

  • summary

• dojo.dnd.Mover.events

  • summary

• dojo.dnd.Mover.node

  • type

    Node

  • summary

    a node (or node's id) to be moved

• dojo.dnd.Mover.marginBox

  • summary

• dojo.dnd.Mover.host

  • type

    Object?

  • summary

    object which implements the functionality of the move,
    and defines proper events (onMoveStart and onMoveStop)

• dojo.dnd

  • type

    Object

  • summary

• dojo

  • type

    Object

  • summary