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

Weird error thrown in IE but not FireFox using DragDrop

Expand Messages
  • Nathan Moschkin
    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,
    Message 1 of 3 , Mar 2, 2009
    • 0 Attachment
      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.DragDropMgr;


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

      DDReorder.superclass.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.clearInterval(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.interactionInfo.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.getElementById("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;

      }
    • Nathan Moschkin
      I found the bug. Apparently you can t set the border all in one go with IE.
      Message 2 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 3 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.