This project is archived and is in readonly mode.

#166 ✓invalid
Romain Preston

Drag.Move , calculateLimit function IE7 + IE8 bug

Reported by Romain Preston | October 27th, 2009 @ 05:12 PM | in 1.2.4.3

When using element.makeDraggable() on an element contained by a form element in the body tag,
in this line of the calculateLimit function of the drag.move class,
offsetParent (this.element.getOffsetParent()) is undefined in IE7 + IE8.

     ['top', 'right', 'bottom', 'left'].each(function(pad){
            containerBorder[pad] = this.container.getStyle('border-' + pad).toInt();
            elementBorder[pad] = this.element.getStyle('border-' + pad).toInt();
            elementMargin[pad] = this.element.getStyle('margin-' + pad).toInt();
            containerMargin[pad] = this.container.getStyle('margin-' + pad).toInt();
            offsetParentPadding[pad] = offsetParent.getStyle('padding-' + pad).toInt();
        }, this);

Here is the extremely quick fix which worked for me… Didn't have the time to look deeper in the class…

     ['top', 'right', 'bottom', 'left'].each(function(pad){
            containerBorder[pad] = this.container.getStyle('border-' + pad).toInt();
            elementBorder[pad] = this.element.getStyle('border-' + pad).toInt();
            elementMargin[pad] = this.element.getStyle('margin-' + pad).toInt();
            containerMargin[pad] = this.container.getStyle('margin-' + pad).toInt();
            offsetParentPadding[pad] = offsetParent ? offsetParent.getStyle('padding-' + pad).toInt() : 0;
     }, this);

here is an online file to demonstrate the bug :
http://82.220.2.207:2533/dragmove.html
(this link will be removed in the coming days, please use the attached html to see the markup if the link is offline)

Comments and changes to this ticket

  • Romain Preston

    Romain Preston October 27th, 2009 @ 05:15 PM

    I should add that the bug only occurs when setting the container option of the makeDraggable to the form element (as coded on the linked page — html file)

  • Romain Preston
  • Romain Preston

    Romain Preston October 29th, 2009 @ 12:41 PM

    • Tag set to 1.2.4.2, drag.move, ie
  • Scott Kyle

    Scott Kyle October 30th, 2009 @ 11:29 PM

    • State changed from “new” to “open”
    • Milestone set to 1.2.4.3
    • Assigned user set to “Scott Kyle”

    Forms and offsetParents are weird, I'll fix this up.

  • Nigel Holder

    Nigel Holder November 22nd, 2009 @ 07:13 PM

    • Tag changed from 1.2.4.2, drag.move, ie to 1, drag.move, ie

    I don't believe it is limited to forms: the following works in Firefox2 but not in IE6 or IE7 (offsetnull is null).

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
      <script type="text/javascript" src="/demo/js/mootools/mootools-1.2.4-core-FULL.js"></script>
      <script type="text/javascript" src="/demo/js/mootools/mootools-1.2.4.2-more-FULL.js"></script>
      
      <script type="text/javascript">
          window.addEvent ("domready", function ()   {
          $('inner').makeDraggable ( { container: $('outer') } );
        });
        </script>
      
      <style type="text/css">
          #outer  { background-color: green; height: 600px; width: 600px; }
          #inner  { background-color: red;   height: 300px; width: 300px; }
        </style>
    </head>
    
    <body>
      <div id="outer">
        <div id="inner">
          drag me
        </div>
      </div>
    </body>
    </html>@@@
    
  • Scott Kyle

    Scott Kyle November 23rd, 2009 @ 06:28 AM

    • State changed from “open” to “invalid”

    The real issue here is obviously that getOffsetParent() in Core is broken. I'm going to close this and reopen under Core. Thanks and sorry this couldn't be fixed sooner, but I'd rather see the bugfix go in the right spot.

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

Attachments

Tags

Pages