dojox/mdnd/Moveable.js

  • Provides:

    • dojox.mdnd.Moveable
  • dojox.mdnd.Moveable

    • type
      Function
    • summary
      Configure parameters and listen to mousedown events from handle
      node.
    • parameters:
      • params: (typeof Object)
        Hash of parameters
      • node: (typeof DOMNode)
    • source: [view]
      dojo.provide("dojox.mdnd.Moveable");


      dojo.declare(
       "dojox.mdnd.Moveable",
       null,
      {
       // summary:
       //  Allow end-users to track a DOM node into the web page


       // handle: DOMNode
       //  The node on which the user clicks to drag the main node.
       handle: null,

       
       // skip: Boolean
       //   A flag to control a drag action if a form element has been focused.
       //  If true, the drag action is not executed.
       skip: true,


       // dragDistance: Integer
       //  The user clicks on the handle, but the drag action will really begin
       //  if he tracks the main node to more than 3 pixels.
       dragDistance: 3,

       
       constructor: function(/*Object*/params, /*DOMNode*/node){
        // summary:
        //   Configure parameters and listen to mousedown events from handle
        //  node.
        // params:
        //  Hash of parameters
        // node:
        //  The draggable node


        //console.log("dojox.mdnd.Moveable ::: constructor");
        this.node = dojo.byId(node);

        
        this.d = this.node.ownerDocument;

        
        if(!params){ params = {}; }
        this.handle = params.handle ? dojo.byId(params.handle) : null;
        if(!this.handle){ this.handle = this.node; }
        this.skip = params.skip;
        this.events = [
         dojo.connect(this.handle, "onmousedown", this, "onMouseDown")
        ];
        if(dojox.mdnd.autoScroll){
         this.autoScroll = dojox.mdnd.autoScroll;
        }
  • dojox.mdnd.Moveable.handle

    • type
      DOMNode
    • summary
      The node on which the user clicks to drag the main node.
  • dojox.mdnd.Moveable.skip

    • type
      Boolean
    • summary
      A flag to control a drag action if a form element has been focused.
      If true, the drag action is not executed.
  • dojox.mdnd.Moveable.dragDistance

    • type
      Integer
    • summary
      The user clicks on the handle, but the drag action will really begin
      if he tracks the main node to more than 3 pixels.
  • dojox.mdnd.Moveable.isFormElement

    • type
      Function
    • parameters:
      • e: (typeof DOMEvent)
        a DOM event
    • source: [view]
      dojo.provide("dojox.mdnd.Moveable");


      dojo.declare(
       "dojox.mdnd.Moveable",
       null,
      {
       // summary:
       //  Allow end-users to track a DOM node into the web page


       // handle: DOMNode
       //  The node on which the user clicks to drag the main node.
       handle: null,

       
       // skip: Boolean
       //   A flag to control a drag action if a form element has been focused.
       //  If true, the drag action is not executed.
       skip: true,


       // dragDistance: Integer
       //  The user clicks on the handle, but the drag action will really begin
       //  if he tracks the main node to more than 3 pixels.
       dragDistance: 3,

       
       constructor: function(/*Object*/params, /*DOMNode*/node){
        // summary:
        //   Configure parameters and listen to mousedown events from handle
        //  node.
        // params:
        //  Hash of parameters
        // node:
        //  The draggable node


        //console.log("dojox.mdnd.Moveable ::: constructor");
        this.node = dojo.byId(node);

        
        this.d = this.node.ownerDocument;

        
        if(!params){ params = {}; }
        this.handle = params.handle ? dojo.byId(params.handle) : null;
        if(!this.handle){ this.handle = this.node; }
        this.skip = params.skip;
        this.events = [
         dojo.connect(this.handle, "onmousedown", this, "onMouseDown")
        ];
        if(dojox.mdnd.autoScroll){
         this.autoScroll = dojox.mdnd.autoScroll;
        }

        
       },

       
       isFormElement: function(/*DOMEvent*/ e){
        // summary:
        //  identify the type of target node associated with a DOM event.
        // e:
        //  a DOM event
        // returns:
        //  if true, the target is one of those specific nodes.


        //console.log("dojox.mdnd.Moveable ::: isFormElement");
        var t = e.target;
        if(t.nodeType == 3 /*TEXT_NODE*/){
         t = t.parentNode;
        }
        return " a button textarea input select option ".indexOf(" " + t.tagName.toLowerCase() + " ") >= 0; // Boolean
    • summary
      identify the type of target node associated with a DOM event.
    • returns
      Boolean
  • dojox.mdnd.Moveable.onMouseDown

    • type
      Function
    • parameters:
      • e: (typeof DOMEvent)
        a DOM event
    • source: [view]
      dojo.provide("dojox.mdnd.Moveable");


      dojo.declare(
       "dojox.mdnd.Moveable",
       null,
      {
       // summary:
       //  Allow end-users to track a DOM node into the web page


       // handle: DOMNode
       //  The node on which the user clicks to drag the main node.
       handle: null,

       
       // skip: Boolean
       //   A flag to control a drag action if a form element has been focused.
       //  If true, the drag action is not executed.
       skip: true,


       // dragDistance: Integer
       //  The user clicks on the handle, but the drag action will really begin
       //  if he tracks the main node to more than 3 pixels.
       dragDistance: 3,

       
       constructor: function(/*Object*/params, /*DOMNode*/node){
        // summary:
        //   Configure parameters and listen to mousedown events from handle
        //  node.
        // params:
        //  Hash of parameters
        // node:
        //  The draggable node


        //console.log("dojox.mdnd.Moveable ::: constructor");
        this.node = dojo.byId(node);

        
        this.d = this.node.ownerDocument;

        
        if(!params){ params = {}; }
        this.handle = params.handle ? dojo.byId(params.handle) : null;
        if(!this.handle){ this.handle = this.node; }
        this.skip = params.skip;
        this.events = [
         dojo.connect(this.handle, "onmousedown", this, "onMouseDown")
        ];
        if(dojox.mdnd.autoScroll){
         this.autoScroll = dojox.mdnd.autoScroll;
        }

        
       },

       
       isFormElement: function(/*DOMEvent*/ e){
        // summary:
        //  identify the type of target node associated with a DOM event.
        // e:
        //  a DOM event
        // returns:
        //  if true, the target is one of those specific nodes.


        //console.log("dojox.mdnd.Moveable ::: isFormElement");
        var t = e.target;
        if(t.nodeType == 3 /*TEXT_NODE*/){
         t = t.parentNode;
        }
        return " a button textarea input select option ".indexOf(" " + t.tagName.toLowerCase() + " ") >= 0; // Boolean
       },

       
       onMouseDown: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user clicks on the handle node.
        //  Skip the drag action if a specific node is targeted.
        //  Listens to mouseup and mousemove events on to the HTML document.
        // e:
        //  a DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onMouseDown");
        if(this._isDragging){ return;}
        var isLeftButton = dojo.isIE ? (e.button == 1) : (e.which == 1);
        if(!isLeftButton){
         return;
        }
        if(this.skip && this.isFormElement(e)){ return; }
        if(this.autoScroll){
         this.autoScroll.setAutoScrollNode(this.node);
         this.autoScroll.setAutoScrollMaxPage();
        }
        this.events.push(dojo.connect(this.d, "onmouseup", this, "onMouseUp"));
        this.events.push(dojo.connect(this.d, "onmousemove", this, "onFirstMove"));
        this._selectStart = dojo.connect(dojo.body(), "onselectstart", dojo.stopEvent);
        this._firstX = e.clientX;
        this._firstY = e.clientY;
        dojo.stopEvent(e);
    • summary
      Occurs when the user clicks on the handle node.
      Skip the drag action if a specific node is targeted.
      Listens to mouseup and mousemove events on to the HTML document.
    • returns
      Boolean
  • dojox.mdnd.Moveable.onFirstMove

    • type
      Function
    • parameters:
      • e: (typeof DOMEvent)
        A DOM event
    • source: [view]
      dojo.provide("dojox.mdnd.Moveable");


      dojo.declare(
       "dojox.mdnd.Moveable",
       null,
      {
       // summary:
       //  Allow end-users to track a DOM node into the web page


       // handle: DOMNode
       //  The node on which the user clicks to drag the main node.
       handle: null,

       
       // skip: Boolean
       //   A flag to control a drag action if a form element has been focused.
       //  If true, the drag action is not executed.
       skip: true,


       // dragDistance: Integer
       //  The user clicks on the handle, but the drag action will really begin
       //  if he tracks the main node to more than 3 pixels.
       dragDistance: 3,

       
       constructor: function(/*Object*/params, /*DOMNode*/node){
        // summary:
        //   Configure parameters and listen to mousedown events from handle
        //  node.
        // params:
        //  Hash of parameters
        // node:
        //  The draggable node


        //console.log("dojox.mdnd.Moveable ::: constructor");
        this.node = dojo.byId(node);

        
        this.d = this.node.ownerDocument;

        
        if(!params){ params = {}; }
        this.handle = params.handle ? dojo.byId(params.handle) : null;
        if(!this.handle){ this.handle = this.node; }
        this.skip = params.skip;
        this.events = [
         dojo.connect(this.handle, "onmousedown", this, "onMouseDown")
        ];
        if(dojox.mdnd.autoScroll){
         this.autoScroll = dojox.mdnd.autoScroll;
        }

        
       },

       
       isFormElement: function(/*DOMEvent*/ e){
        // summary:
        //  identify the type of target node associated with a DOM event.
        // e:
        //  a DOM event
        // returns:
        //  if true, the target is one of those specific nodes.


        //console.log("dojox.mdnd.Moveable ::: isFormElement");
        var t = e.target;
        if(t.nodeType == 3 /*TEXT_NODE*/){
         t = t.parentNode;
        }
        return " a button textarea input select option ".indexOf(" " + t.tagName.toLowerCase() + " ") >= 0; // Boolean
       },

       
       onMouseDown: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user clicks on the handle node.
        //  Skip the drag action if a specific node is targeted.
        //  Listens to mouseup and mousemove events on to the HTML document.
        // e:
        //  a DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onMouseDown");
        if(this._isDragging){ return;}
        var isLeftButton = dojo.isIE ? (e.button == 1) : (e.which == 1);
        if(!isLeftButton){
         return;
        }
        if(this.skip && this.isFormElement(e)){ return; }
        if(this.autoScroll){
         this.autoScroll.setAutoScrollNode(this.node);
         this.autoScroll.setAutoScrollMaxPage();
        }
        this.events.push(dojo.connect(this.d, "onmouseup", this, "onMouseUp"));
        this.events.push(dojo.connect(this.d, "onmousemove", this, "onFirstMove"));
        this._selectStart = dojo.connect(dojo.body(), "onselectstart", dojo.stopEvent);
        this._firstX = e.clientX;
        this._firstY = e.clientY;
        dojo.stopEvent(e);
       },

       
       onFirstMove: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user moves the mouse after clicking on the
        //  handle.
        //  Determinate when the drag action will have to begin (see
        //  dragDistance).
        // e:
        //  A DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onFirstMove");
        dojo.stopEvent(e);
        var d = (this._firstX - e.clientX) * (this._firstX - e.clientX)
          + (this._firstY - e.clientY) * (this._firstY - e.clientY);
        if(d > this.dragDistance * this.dragDistance){
         this._isDragging = true;
         dojo.disconnect(this.events.pop());
         dojo.style(this.node, "width", dojo.contentBox(this.node).w + "px");
         this.initOffsetDrag(e);
         this.events.push(dojo.connect(this.d, "onmousemove", this, "onMove"));
        }
    • summary
      Occurs when the user moves the mouse after clicking on the
      handle.
      Determinate when the drag action will have to begin (see
      dragDistance).
    • returns
      Boolean
  • dojox.mdnd.Moveable.initOffsetDrag

    • type
      Function
    • parameters:
      • e: (typeof DOMEvent)
    • source: [view]
      dojo.provide("dojox.mdnd.Moveable");


      dojo.declare(
       "dojox.mdnd.Moveable",
       null,
      {
       // summary:
       //  Allow end-users to track a DOM node into the web page


       // handle: DOMNode
       //  The node on which the user clicks to drag the main node.
       handle: null,

       
       // skip: Boolean
       //   A flag to control a drag action if a form element has been focused.
       //  If true, the drag action is not executed.
       skip: true,


       // dragDistance: Integer
       //  The user clicks on the handle, but the drag action will really begin
       //  if he tracks the main node to more than 3 pixels.
       dragDistance: 3,

       
       constructor: function(/*Object*/params, /*DOMNode*/node){
        // summary:
        //   Configure parameters and listen to mousedown events from handle
        //  node.
        // params:
        //  Hash of parameters
        // node:
        //  The draggable node


        //console.log("dojox.mdnd.Moveable ::: constructor");
        this.node = dojo.byId(node);

        
        this.d = this.node.ownerDocument;

        
        if(!params){ params = {}; }
        this.handle = params.handle ? dojo.byId(params.handle) : null;
        if(!this.handle){ this.handle = this.node; }
        this.skip = params.skip;
        this.events = [
         dojo.connect(this.handle, "onmousedown", this, "onMouseDown")
        ];
        if(dojox.mdnd.autoScroll){
         this.autoScroll = dojox.mdnd.autoScroll;
        }

        
       },

       
       isFormElement: function(/*DOMEvent*/ e){
        // summary:
        //  identify the type of target node associated with a DOM event.
        // e:
        //  a DOM event
        // returns:
        //  if true, the target is one of those specific nodes.


        //console.log("dojox.mdnd.Moveable ::: isFormElement");
        var t = e.target;
        if(t.nodeType == 3 /*TEXT_NODE*/){
         t = t.parentNode;
        }
        return " a button textarea input select option ".indexOf(" " + t.tagName.toLowerCase() + " ") >= 0; // Boolean
       },

       
       onMouseDown: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user clicks on the handle node.
        //  Skip the drag action if a specific node is targeted.
        //  Listens to mouseup and mousemove events on to the HTML document.
        // e:
        //  a DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onMouseDown");
        if(this._isDragging){ return;}
        var isLeftButton = dojo.isIE ? (e.button == 1) : (e.which == 1);
        if(!isLeftButton){
         return;
        }
        if(this.skip && this.isFormElement(e)){ return; }
        if(this.autoScroll){
         this.autoScroll.setAutoScrollNode(this.node);
         this.autoScroll.setAutoScrollMaxPage();
        }
        this.events.push(dojo.connect(this.d, "onmouseup", this, "onMouseUp"));
        this.events.push(dojo.connect(this.d, "onmousemove", this, "onFirstMove"));
        this._selectStart = dojo.connect(dojo.body(), "onselectstart", dojo.stopEvent);
        this._firstX = e.clientX;
        this._firstY = e.clientY;
        dojo.stopEvent(e);
       },

       
       onFirstMove: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user moves the mouse after clicking on the
        //  handle.
        //  Determinate when the drag action will have to begin (see
        //  dragDistance).
        // e:
        //  A DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onFirstMove");
        dojo.stopEvent(e);
        var d = (this._firstX - e.clientX) * (this._firstX - e.clientX)
          + (this._firstY - e.clientY) * (this._firstY - e.clientY);
        if(d > this.dragDistance * this.dragDistance){
         this._isDragging = true;
         dojo.disconnect(this.events.pop());
         dojo.style(this.node, "width", dojo.contentBox(this.node).w + "px");
         this.initOffsetDrag(e);
         this.events.push(dojo.connect(this.d, "onmousemove", this, "onMove"));
        }
       },

       
       initOffsetDrag: function(/*DOMEvent*/e){
        // summary:
        //  Initialize the gap between main node coordinates and the clicked point.
        //  Call the onDragStart method.
        // e:
        //  A DOM event


        //console.log("dojox.mdnd.Moveable ::: initOffsetDrag");
        this.offsetDrag = { 'l': e.pageX, 't': e.pageY };
        var s = this.node.style;
        var position = dojo.position(this.node, true);
        /*if(s.position == "relative" || s.position == ""){
         s.position = "absolute"; // enforcing the absolute mode
        }*/
        this.offsetDrag.l = position.x - this.offsetDrag.l;
        this.offsetDrag.t = position.y - this.offsetDrag.t;
        var coords = {
         'x': position.x,
         'y': position.y
        };
        this.size = {
         'w': position.w,
         'h': position.h
        };
        // method to catch
        this.onDragStart(this.node, coords, this.size);
    • summary
      Initialize the gap between main node coordinates and the clicked point.
      Call the onDragStart method.
    • returns
      Boolean
  • dojox.mdnd.Moveable.onMove

    • type
      Function
    • parameters:
      • e: (typeof DOMEvent)
        a DOM event
    • source: [view]
      dojo.provide("dojox.mdnd.Moveable");


      dojo.declare(
       "dojox.mdnd.Moveable",
       null,
      {
       // summary:
       //  Allow end-users to track a DOM node into the web page


       // handle: DOMNode
       //  The node on which the user clicks to drag the main node.
       handle: null,

       
       // skip: Boolean
       //   A flag to control a drag action if a form element has been focused.
       //  If true, the drag action is not executed.
       skip: true,


       // dragDistance: Integer
       //  The user clicks on the handle, but the drag action will really begin
       //  if he tracks the main node to more than 3 pixels.
       dragDistance: 3,

       
       constructor: function(/*Object*/params, /*DOMNode*/node){
        // summary:
        //   Configure parameters and listen to mousedown events from handle
        //  node.
        // params:
        //  Hash of parameters
        // node:
        //  The draggable node


        //console.log("dojox.mdnd.Moveable ::: constructor");
        this.node = dojo.byId(node);

        
        this.d = this.node.ownerDocument;

        
        if(!params){ params = {}; }
        this.handle = params.handle ? dojo.byId(params.handle) : null;
        if(!this.handle){ this.handle = this.node; }
        this.skip = params.skip;
        this.events = [
         dojo.connect(this.handle, "onmousedown", this, "onMouseDown")
        ];
        if(dojox.mdnd.autoScroll){
         this.autoScroll = dojox.mdnd.autoScroll;
        }

        
       },

       
       isFormElement: function(/*DOMEvent*/ e){
        // summary:
        //  identify the type of target node associated with a DOM event.
        // e:
        //  a DOM event
        // returns:
        //  if true, the target is one of those specific nodes.


        //console.log("dojox.mdnd.Moveable ::: isFormElement");
        var t = e.target;
        if(t.nodeType == 3 /*TEXT_NODE*/){
         t = t.parentNode;
        }
        return " a button textarea input select option ".indexOf(" " + t.tagName.toLowerCase() + " ") >= 0; // Boolean
       },

       
       onMouseDown: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user clicks on the handle node.
        //  Skip the drag action if a specific node is targeted.
        //  Listens to mouseup and mousemove events on to the HTML document.
        // e:
        //  a DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onMouseDown");
        if(this._isDragging){ return;}
        var isLeftButton = dojo.isIE ? (e.button == 1) : (e.which == 1);
        if(!isLeftButton){
         return;
        }
        if(this.skip && this.isFormElement(e)){ return; }
        if(this.autoScroll){
         this.autoScroll.setAutoScrollNode(this.node);
         this.autoScroll.setAutoScrollMaxPage();
        }
        this.events.push(dojo.connect(this.d, "onmouseup", this, "onMouseUp"));
        this.events.push(dojo.connect(this.d, "onmousemove", this, "onFirstMove"));
        this._selectStart = dojo.connect(dojo.body(), "onselectstart", dojo.stopEvent);
        this._firstX = e.clientX;
        this._firstY = e.clientY;
        dojo.stopEvent(e);
       },

       
       onFirstMove: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user moves the mouse after clicking on the
        //  handle.
        //  Determinate when the drag action will have to begin (see
        //  dragDistance).
        // e:
        //  A DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onFirstMove");
        dojo.stopEvent(e);
        var d = (this._firstX - e.clientX) * (this._firstX - e.clientX)
          + (this._firstY - e.clientY) * (this._firstY - e.clientY);
        if(d > this.dragDistance * this.dragDistance){
         this._isDragging = true;
         dojo.disconnect(this.events.pop());
         dojo.style(this.node, "width", dojo.contentBox(this.node).w + "px");
         this.initOffsetDrag(e);
         this.events.push(dojo.connect(this.d, "onmousemove", this, "onMove"));
        }
       },

       
       initOffsetDrag: function(/*DOMEvent*/e){
        // summary:
        //  Initialize the gap between main node coordinates and the clicked point.
        //  Call the onDragStart method.
        // e:
        //  A DOM event


        //console.log("dojox.mdnd.Moveable ::: initOffsetDrag");
        this.offsetDrag = { 'l': e.pageX, 't': e.pageY };
        var s = this.node.style;
        var position = dojo.position(this.node, true);
        /*if(s.position == "relative" || s.position == ""){
         s.position = "absolute"; // enforcing the absolute mode
        }*/
        this.offsetDrag.l = position.x - this.offsetDrag.l;
        this.offsetDrag.t = position.y - this.offsetDrag.t;
        var coords = {
         'x': position.x,
         'y': position.y
        };
        this.size = {
         'w': position.w,
         'h': position.h
        };
        // method to catch
        this.onDragStart(this.node, coords, this.size);
       },

       
       onMove: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user moves the mouse.
        //  Calls the onDrag method.
        // e:
        //  a DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onMove");
        dojo.stopEvent(e);
        // hack to avoid too many calls to onMove in IE8 causing sometimes slowness
        if(dojo.isIE == 8 && new Date() - this.date < 20){
         return;
        }
        if(this.autoScroll){
         this.autoScroll.checkAutoScroll(e);
        }
        var coords = {
         'x': this.offsetDrag.l + e.pageX,
         'y': this.offsetDrag.t + e.pageY
        };
        var s = this.node.style;
        s.left = coords.x + "px";
        s.top = coords.y + "px";

        
        // method to catch
        this.onDrag(this.node, coords, this.size, {'x':e.pageX, 'y':e.pageY});
        if(dojo.isIE == 8){
         this.date = new Date();
        }
    • summary
      Occurs when the user moves the mouse.
      Calls the onDrag method.
    • returns
      Boolean
  • dojox.mdnd.Moveable.onMouseUp

    • type
      Function
    • parameters:
      • e: (typeof DOMEvent)
        a DOM event
    • source: [view]
        if (this._isDragging){
         dojo.stopEvent(e);
         this._isDragging = false;
         if(this.autoScroll){
          this.autoScroll.stopAutoScroll();
         }
         delete this.onMove;
         this.onDragEnd(this.node);
         this.node.focus();
        }
        dojo.disconnect(this.events.pop());
        dojo.disconnect(this.events.pop());
    • summary
      Occurs when the user releases the mouse
      Calls the onDragEnd method.
  • dojox.mdnd.Moveable.onDragStart

    • type
      Function
    • parameters:
      • node: (typeof DOMNode)
        a DOM node
      • coords: (typeof Object)
        absolute position of the main node
      • size: (typeof Object)
        an object encapsulating width an height values
    • source: [view]
        // summary:
        //  Stub function.
        //  Notes : border box model
        // node:
        //  a DOM node
        // coords:
        //  absolute position of the main node
        // size:
        //  an object encapsulating width an height values
        // tags:
        //  callback
    • summary
      Stub function.
      Notes : border box model
    • tags:
  • dojox.mdnd.Moveable.onDragEnd

    • type
      Function
    • parameters:
      • node: (typeof DOMNode)
        a DOM node
    • source: [view]
        // summary:
        //  Stub function
        //  Notes : Coordinates don't contain margins
        // node:
        //  a DOM node
        // tags:
        //  callback
    • summary
      Stub function
      Notes : Coordinates don't contain margins
    • tags:
  • dojox.mdnd.Moveable.onDrag

    • type
      Function
    • parameters:
      • node: (typeof DOMNode)
        a DOM node
      • coords: (typeof Object)
        position of the main node (equals to css left/top properties)
      • size: (typeof Object)
        an object encapsulating width and height values
      • mousePosition: (typeof Object)
        coordiantes of mouse
    • source: [view]
        // summary:
        //  Stub function.
        //  Notes : border box model for size value, margin box model for coordinates
        // node:
        //  a DOM node
        // coords:
        //  position of the main node (equals to css left/top properties)
        // size:
        //  an object encapsulating width and height values
        // mousePosition:
        //  coordiantes of mouse
        // tags:
        //  callback
    • summary
      Stub function.
      Notes : border box model for size value, margin box model for coordinates
    • tags:
  • dojox.mdnd.Moveable.destroy

    • type
      Function
    • source: [view]
      dojo.provide("dojox.mdnd.Moveable");


      dojo.declare(
       "dojox.mdnd.Moveable",
       null,
      {
       // summary:
       //  Allow end-users to track a DOM node into the web page


       // handle: DOMNode
       //  The node on which the user clicks to drag the main node.
       handle: null,

       
       // skip: Boolean
       //   A flag to control a drag action if a form element has been focused.
       //  If true, the drag action is not executed.
       skip: true,


       // dragDistance: Integer
       //  The user clicks on the handle, but the drag action will really begin
       //  if he tracks the main node to more than 3 pixels.
       dragDistance: 3,

       
       constructor: function(/*Object*/params, /*DOMNode*/node){
        // summary:
        //   Configure parameters and listen to mousedown events from handle
        //  node.
        // params:
        //  Hash of parameters
        // node:
        //  The draggable node


        //console.log("dojox.mdnd.Moveable ::: constructor");
        this.node = dojo.byId(node);

        
        this.d = this.node.ownerDocument;

        
        if(!params){ params = {}; }
        this.handle = params.handle ? dojo.byId(params.handle) : null;
        if(!this.handle){ this.handle = this.node; }
        this.skip = params.skip;
        this.events = [
         dojo.connect(this.handle, "onmousedown", this, "onMouseDown")
        ];
        if(dojox.mdnd.autoScroll){
         this.autoScroll = dojox.mdnd.autoScroll;
        }

        
       },

       
       isFormElement: function(/*DOMEvent*/ e){
        // summary:
        //  identify the type of target node associated with a DOM event.
        // e:
        //  a DOM event
        // returns:
        //  if true, the target is one of those specific nodes.


        //console.log("dojox.mdnd.Moveable ::: isFormElement");
        var t = e.target;
        if(t.nodeType == 3 /*TEXT_NODE*/){
         t = t.parentNode;
        }
        return " a button textarea input select option ".indexOf(" " + t.tagName.toLowerCase() + " ") >= 0; // Boolean
       },

       
       onMouseDown: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user clicks on the handle node.
        //  Skip the drag action if a specific node is targeted.
        //  Listens to mouseup and mousemove events on to the HTML document.
        // e:
        //  a DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onMouseDown");
        if(this._isDragging){ return;}
        var isLeftButton = dojo.isIE ? (e.button == 1) : (e.which == 1);
        if(!isLeftButton){
         return;
        }
        if(this.skip && this.isFormElement(e)){ return; }
        if(this.autoScroll){
         this.autoScroll.setAutoScrollNode(this.node);
         this.autoScroll.setAutoScrollMaxPage();
        }
        this.events.push(dojo.connect(this.d, "onmouseup", this, "onMouseUp"));
        this.events.push(dojo.connect(this.d, "onmousemove", this, "onFirstMove"));
        this._selectStart = dojo.connect(dojo.body(), "onselectstart", dojo.stopEvent);
        this._firstX = e.clientX;
        this._firstY = e.clientY;
        dojo.stopEvent(e);
       },

       
       onFirstMove: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user moves the mouse after clicking on the
        //  handle.
        //  Determinate when the drag action will have to begin (see
        //  dragDistance).
        // e:
        //  A DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onFirstMove");
        dojo.stopEvent(e);
        var d = (this._firstX - e.clientX) * (this._firstX - e.clientX)
          + (this._firstY - e.clientY) * (this._firstY - e.clientY);
        if(d > this.dragDistance * this.dragDistance){
         this._isDragging = true;
         dojo.disconnect(this.events.pop());
         dojo.style(this.node, "width", dojo.contentBox(this.node).w + "px");
         this.initOffsetDrag(e);
         this.events.push(dojo.connect(this.d, "onmousemove", this, "onMove"));
        }
       },

       
       initOffsetDrag: function(/*DOMEvent*/e){
        // summary:
        //  Initialize the gap between main node coordinates and the clicked point.
        //  Call the onDragStart method.
        // e:
        //  A DOM event


        //console.log("dojox.mdnd.Moveable ::: initOffsetDrag");
        this.offsetDrag = { 'l': e.pageX, 't': e.pageY };
        var s = this.node.style;
        var position = dojo.position(this.node, true);
        /*if(s.position == "relative" || s.position == ""){
         s.position = "absolute"; // enforcing the absolute mode
        }*/
        this.offsetDrag.l = position.x - this.offsetDrag.l;
        this.offsetDrag.t = position.y - this.offsetDrag.t;
        var coords = {
         'x': position.x,
         'y': position.y
        };
        this.size = {
         'w': position.w,
         'h': position.h
        };
        // method to catch
        this.onDragStart(this.node, coords, this.size);
       },

       
       onMove: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user moves the mouse.
        //  Calls the onDrag method.
        // e:
        //  a DOM event
        // tags:
        //  callback


        //console.log("dojox.mdnd.Moveable ::: onMove");
        dojo.stopEvent(e);
        // hack to avoid too many calls to onMove in IE8 causing sometimes slowness
        if(dojo.isIE == 8 && new Date() - this.date < 20){
         return;
        }
        if(this.autoScroll){
         this.autoScroll.checkAutoScroll(e);
        }
        var coords = {
         'x': this.offsetDrag.l + e.pageX,
         'y': this.offsetDrag.t + e.pageY
        };
        var s = this.node.style;
        s.left = coords.x + "px";
        s.top = coords.y + "px";

        
        // method to catch
        this.onDrag(this.node, coords, this.size, {'x':e.pageX, 'y':e.pageY});
        if(dojo.isIE == 8){
         this.date = new Date();
        }
       },

       
       onMouseUp: function(/*DOMEvent*/e){
        // summary:
        //  Occurs when the user releases the mouse
        //  Calls the onDragEnd method.
        // e:
        //  a DOM event


        if (this._isDragging){
         dojo.stopEvent(e);
         this._isDragging = false;
         if(this.autoScroll){
          this.autoScroll.stopAutoScroll();
         }
         delete this.onMove;
         this.onDragEnd(this.node);
         this.node.focus();
        }
        dojo.disconnect(this.events.pop());
        dojo.disconnect(this.events.pop());
       },

       
       onDragStart: function(/*DOMNode*/node, /*Object*/coords, /*Object*/size){
        // summary:
        //  Stub function.
        //  Notes : border box model
        // node:
        //  a DOM node
        // coords:
        //  absolute position of the main node
        // size:
        //  an object encapsulating width an height values
        // tags:
        //  callback


       },

       
       onDragEnd: function(/*DOMNode*/node){
        // summary:
        //  Stub function
        //  Notes : Coordinates don't contain margins
        // node:
        //  a DOM node
        // tags:
        //  callback


       },

       
       onDrag: function(/*DOMNode*/node, /*Object*/coords, /*Object*/size, /*Object*/mousePosition){
        // summary:
        //  Stub function.
        //  Notes : border box model for size value, margin box model for coordinates
        // node:
        //  a DOM node
        // coords:
        //  position of the main node (equals to css left/top properties)
        // size:
        //  an object encapsulating width and height values
        // mousePosition:
        //  coordiantes of mouse
        // tags:
        //  callback


       },


       destroy: function(){
        // summary:
        //  Delecte associated events


        // console.log("dojox.mdnd.Moveable ::: destroy");
        dojo.forEach(this.events, dojo.disconnect);
        this.events = this.node = null;
    • returns
      Boolean
    • summary
  • dojox.mdnd.Moveable._selectStart

    • summary
  • dojox.mdnd.Moveable._firstX

    • summary
  • dojox.mdnd.Moveable._firstY

    • summary
  • dojox.mdnd.Moveable._isDragging

    • summary
  • dojox.mdnd.Moveable.offsetDrag

    • summary
  • dojox.mdnd.Moveable.offsetDrag.l

    • summary
  • dojox.mdnd.Moveable.offsetDrag.t

    • summary
  • dojox.mdnd.Moveable.size

    • summary
  • dojox.mdnd.Moveable.date

    • summary
  • dojox.mdnd.Moveable.events

    • summary
  • dojox.mdnd.Moveable.node

    • summary
  • dojox.mdnd.Moveable.d

    • summary
  • dojox.mdnd.Moveable.autoScroll

    • summary
  • dojox.mdnd

    • type
      Object
    • summary
  • dojox

    • type
      Object
    • summary