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

Re: [ydn-javascript] Weird error thrown in IE but not FireFox using DragDrop

Expand Messages
  • Nathan Moschkin
    I found the bug. Apparently you can t set the border all in one go with IE.
    Message 1 of 3 , Mar 2, 2009
    • 0 Attachment

      I found the bug.  Apparently you can't set the border all in one go with IE.

      Nathan Moschkin wrote:

      dealing with Internet Explorer (v7 or 8, doesn't matter which) :

      I am initiating a drag and drop to reorder elements on the screen ...

      But when I do, immediately it throws the error : Invalid argument, line
      125, dom.js

      el.style[property] = val;

      under the if (isIE) { } branch.

      The doctype is strict xhtml 1.0

      and the DD code I'm using is:

      var myList = new Array();
      var Dom = YAHOO.util.Dom;
      var Event = YAHOO.util.Event;
      var DDM = YAHOO.util.DragDrop Mgr;

      var DDReorder = function(id, sGroup, config) {

      DDReorder.superclas s.constructor. call(this, id, sGroup, config);

      this.logger = this.logger || YAHOO;
      var el = this.getDragEl( );
      Dom.setStyle( el, "opacity", 0.67); // The proxy is slightly transparent

      this.goingUp = false;
      this.lastY = 0;

      this.goingLeft = false;
      this.lastX = 0;
      };

      YAHOO.extend( DDReorder, YAHOO.util.DDProxy, {

      startDrag: function(x, y) {
      // this.logger. log(this. id + " startDrag");

      // make the proxy look like the source element
      var dragEl = this.getDragEl( );
      var clickEl = this.getEl() ;
      window.clearInterva l(intervalTimer) ;
      Dom.setStyle( clickEl, "visibility" , "hidden");

      dragEl.innerHTML = clickEl.innerHTML;

      Dom.setStyle( dragEl, "color", Dom.getStyle( clickEl, "color"));
      Dom.setStyle( dragEl, "backgroundColor" , Dom.getStyle( clickEl,
      "backgroundColor" ));
      Dom.setStyle( dragEl, "border", Dom.getStyle( clickEl, "border"));
      },

      endDrag: function(e) {

      var srcEl = this.getEl() ;
      var proxy = this.getDragEl( );
      var fOrder;

      // Show the proxy element and animate it to the src element's
      location
      Dom.setStyle( proxy, "visibility" , "");
      var a = new YAHOO.util.Motion(
      proxy, {
      points: {
      to: Dom.getXY(srcEl)
      }
      },
      0.2,
      YAHOO.util.Easing. easeOut
      )
      var proxyid = proxy.id;
      var thisid = this.id;

      // Hide the proxy and show the source element when finished with
      the animation
      a.onComplete. subscribe( function( ) {
      Dom.setStyle( proxyid, "visibility" , "hidden");
      Dom.setStyle( thisid, "visibility" , "");
      });
      a.animate();

      // this.resetTargets( );
      fOrder = getCurrentFileOrder ();
      // window.alert (fOrder);
      pathGetInfo( "set_file_ order", fOrder, cFolder, afterSetOrder) ;
      if ((modeSearch == false) && (intervalTimer == 0)) intervalTimer
      = window.setInterval( "checkAll( )", 30000);

      },

      onDragDrop: function(e, id) {

      // If there is one drop interaction, the li was dropped either
      on the list,
      // or it was dropped on the current location of the source element.
      //if (DDM.interactionInf o.drop.length === 1) {
      //
      // // The position of the cursor at the time of the drop
      (YAHOO.util. Point)
      // var pt = DDM.interactionInfo .point;
      //
      // // The region occupied by the source element at the time
      of the drop
      // var region = DDM.interactionInfo .sourceRegion;
      //
      // // Check to see if we are over the source element's
      location. We will
      // // append to the bottom of the list once we are sure it
      was a drop in
      // // the negative space (the area of the list without any
      list items)
      // if (!region.intersect( pt)) {
      // var destEl = Dom.get(id);
      // var destDD = DDM.getDDById( id);
      // destEl.appendChild( this.getEl( ));
      // destDD.isEmpty = false;
      // DDM.refreshCache( );
      // }
      //
      //}
      // body_resize( );
      },

      onDrag: function(e) {

      // Keep track of the direction of the drag for use during onDragOver
      var y = Event.getPageY( e);
      var x = Event.getPageX( e);
      //window.alert( x + "x" + y);
      if (y < this.lastY) {
      this.goingUp = true;
      } else if (y > this.lastY) {
      this.goingUp = false;
      }

      if (x < this.lastX) {
      this.goingLeft = true;
      } else if (x > this.lastX) {
      this.goingLeft = false;
      }

      this.lastY = y;
      this.lastX = x;
      },

      onDragOver: function(e, id) {

      var srcEl = this.getEl() ;
      var destEl = Dom.get(id);

      var mdx;
      var mdy;

      mdy = Math.abs(e.clientY - this.lastY);
      mdx = Math.abs(e.clientX - this.lastX);



      // We are only concerned with list items, we ignore the dragover
      // notifications for the list.
      //if (destEl.nodeName. toLowerCase( ) == "li") {
      if (destEl.id.indexOf( "reorderId_ ") != -1) {
      var orig_p = srcEl.parentNode;
      var p = destEl.parentNode;

      //if (mdy >= mdx) {
      // if (this.goingUp) {
      // p.insertBefore( srcEl, destEl); // insert above
      // }
      // else {
      // p.insertBefore( srcEl, destEl.nextSibling) ; //
      insert below
      // }
      //}
      //else {
      // if (this.goingLeft) {
      // p.insertBefore( srcEl, destEl); // insert above
      // }
      // else {
      // p.insertBefore( srcEl, destEl.nextSibling) ; //
      insert below
      // }
      //
      //}
      if (this.goingUp || this.goingLeft) {
      p.insertBefore( srcEl, destEl); // insert above
      } else {
      p.insertBefore( srcEl, destEl.nextSibling) ; // insert below
      }

      DDM.refreshCache( );
      }
      }
      });

      function afterSetOrder( o) {
      //window.alert( o.result) ;

      }

      function getCurrentFileOrder () {
      var fs = document.getElement ById("file_ space");
      var ch;
      var sOut = "";
      var sT;

      ch = fs.firstChild. firstChild;

      do {

      sT = ch.id.substring( 10);
      if (sOut != "") sOut += ",";
      sOut += sT;

      ch = ch.nextSibling;

      } while (ch != null);

      return sOut;

      }


    • Yunfei Wu
      double check your syntext, recommend jsLint, it s sound a typo to me ________________________________ From: Nathan Moschkin To:
      Message 2 of 3 , Mar 2, 2009
      • 0 Attachment
        double check your syntext, recommend jsLint, it's sound a typo to me


        From: Nathan Moschkin <nmoschkin@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Monday, March 2, 2009 4:37:46 PM
        Subject: [ydn-javascript] Weird error thrown in IE but not FireFox using DragDrop

        dealing with Internet Explorer (v7 or 8, doesn't matter which) :

        I am initiating a drag and drop to reorder elements on the screen ...

        But when I do, immediately it throws the error : Invalid argument, line
        125, dom.js

        el.style[property] = val;

        under the if (isIE) { } branch.

        The doctype is strict xhtml 1.0

        and the DD code I'm using is:

        var myList = new Array();
        var Dom = YAHOO.util.Dom;
        var Event = YAHOO.util.Event;
        var DDM = YAHOO.util.DragDrop Mgr;

        var DDReorder = function(id, sGroup, config) {

        DDReorder.superclas s.constructor. call(this, id, sGroup, config);

        this.logger = this.logger || YAHOO;
        var el = this.getDragEl( );
        Dom.setStyle( el, "opacity", 0.67); // The proxy is slightly transparent

        this.goingUp = false;
        this.lastY = 0;

        this.goingLeft = false;
        this.lastX = 0;
        };

        YAHOO.extend( DDReorder, YAHOO.util.DDProxy, {

        startDrag: function(x, y) {
        // this.logger. log(this. id + " startDrag");

        // make the proxy look like the source element
        var dragEl = this.getDragEl( );
        var clickEl = this.getEl() ;
        window.clearInterva l(intervalTimer) ;
        Dom.setStyle( clickEl, "visibility" , "hidden");

        dragEl.innerHTML = clickEl.innerHTML;

        Dom.setStyle( dragEl, "color", Dom.getStyle( clickEl, "color"));
        Dom.setStyle( dragEl, "backgroundColor" , Dom.getStyle( clickEl,
        "backgroundColor" ));
        Dom.setStyle( dragEl, "border", Dom.getStyle( clickEl, "border"));
        },

        endDrag: function(e) {

        var srcEl = this.getEl() ;
        var proxy = this.getDragEl( );
        var fOrder;

        // Show the proxy element and animate it to the src element's
        location
        Dom.setStyle( proxy, "visibility" , "");
        var a = new YAHOO.util.Motion(
        proxy, {
        points: {
        to: Dom.getXY(srcEl)
        }
        },
        0.2,
        YAHOO.util.Easing. easeOut
        )
        var proxyid = proxy.id;
        var thisid = this.id;

        // Hide the proxy and show the source element when finished with
        the animation
        a.onComplete. subscribe( function( ) {
        Dom.setStyle( proxyid, "visibility" , "hidden");
        Dom.setStyle( thisid, "visibility" , "");
        });
        a.animate();

        // this.resetTargets( );
        fOrder = getCurrentFileOrder ();
        // window.alert (fOrder);
        pathGetInfo( "set_file_ order", fOrder, cFolder, afterSetOrder) ;
        if ((modeSearch == false) && (intervalTimer == 0)) intervalTimer
        = window.setInterval( "checkAll( )", 30000);

        },

        onDragDrop: function(e, id) {

        // If there is one drop interaction, the li was dropped either
        on the list,
        // or it was dropped on the current location of the source element.
        //if (DDM.interactionInf o.drop.length === 1) {
        //
        // // The position of the cursor at the time of the drop
        (YAHOO.util. Point)
        // var pt = DDM.interactionInfo .point;
        //
        // // The region occupied by the source element at the time
        of the drop
        // var region = DDM.interactionInfo .sourceRegion;
        //
        // // Check to see if we are over the source element's
        location. We will
        // // append to the bottom of the list once we are sure it
        was a drop in
        // // the negative space (the area of the list without any
        list items)
        // if (!region.intersect( pt)) {
        // var destEl = Dom.get(id);
        // var destDD = DDM.getDDById( id);
        // destEl.appendChild( this.getEl( ));
        // destDD.isEmpty = false;
        // DDM.refreshCache( );
        // }
        //
        //}
        // body_resize( );
        },

        onDrag: function(e) {

        // Keep track of the direction of the drag for use during onDragOver
        var y = Event.getPageY( e);
        var x = Event.getPageX( e);
        //window.alert( x + "x" + y);
        if (y < this.lastY) {
        this.goingUp = true;
        } else if (y > this.lastY) {
        this.goingUp = false;
        }

        if (x < this.lastX) {
        this.goingLeft = true;
        } else if (x > this.lastX) {
        this.goingLeft = false;
        }

        this.lastY = y;
        this.lastX = x;
        },

        onDragOver: function(e, id) {

        var srcEl = this.getEl() ;
        var destEl = Dom.get(id);

        var mdx;
        var mdy;

        mdy = Math.abs(e.clientY - this.lastY);
        mdx = Math.abs(e.clientX - this.lastX);



        // We are only concerned with list items, we ignore the dragover
        // notifications for the list.
        //if (destEl.nodeName. toLowerCase( ) == "li") {
        if (destEl.id.indexOf( "reorderId_ ") != -1) {
        var orig_p = srcEl.parentNode;
        var p = destEl.parentNode;

        //if (mdy >= mdx) {
        // if (this.goingUp) {
        // p.insertBefore( srcEl, destEl); // insert above
        // }
        // else {
        // p.insertBefore( srcEl, destEl.nextSibling) ; //
        insert below
        // }
        //}
        //else {
        // if (this.goingLeft) {
        // p.insertBefore( srcEl, destEl); // insert above
        // }
        // else {
        // p.insertBefore( srcEl, destEl.nextSibling) ; //
        insert below
        // }
        //
        //}
        if (this.goingUp || this.goingLeft) {
        p.insertBefore( srcEl, destEl); // insert above
        } else {
        p.insertBefore( srcEl, destEl.nextSibling) ; // insert below
        }

        DDM.refreshCache( );
        }
        }
        });

        function afterSetOrder( o) {
        //window.alert( o.result) ;

        }

        function getCurrentFileOrder () {
        var fs = document.getElement ById("file_ space");
        var ch;
        var sOut = "";
        var sT;

        ch = fs.firstChild. firstChild;

        do {

        sT = ch.id.substring( 10);
        if (sOut != "") sOut += ",";
        sOut += sT;

        ch = ch.nextSibling;

        } while (ch != null);

        return sOut;

        }


      Your message has been successfully submitted and would be delivered to recipients shortly.