#10 new
Phillip Sauerbeck

Draggables from an overflow:auto div in ie7 are stuck

Reported by Phillip Sauerbeck | May 22nd, 2008 @ 03:10 AM

After applying this fix for ie7-: dragdrop_originallyabsolute.diff

In ie7 and lower, when the containing div (with overflow:auto;) for draggables with is scrolled, the draggable elements appear stuck -- as if their position is fixed to the containing div.

Below is the HTML to reproduce this bug.

p.s. Ignore HTML code in the comment that I made for this ticket... lighthouse mugged it up.

Many thanks,

Phillip

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<script src="/javascripts/prototype.js" type="text/javascript"></script>
		<script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
</head>
<body>

<style type="text/css">

div#droppable_container{ 
		margin-bottom: 30px;  
  	height:240px; 
  	width: 500px; 
  	background: black;
  	padding: 10px;
	}  

div#droppable_demo{ 
	  width:160px; 
	  height:120px; 
		font-size: 15px;
	  background:#ffffff; 
	  border:5px solid #ccc; 
	  text-align:center;
	  float: right;
	}

#draggable_demo{
		background: yellowgreen;
		margin: 5px;
		border: 3px solid green;
		width: 100px;
		height: 100px;
		cursor: move;
		font-size: 15px;
		float: left;
	}

.spaceHolder {
	background: orange;
	margin: 5px;
	border: 3px solid orangered;
	width: 100px;
	height: 100px;
	font-size: 15px;
	float: left;
}

div#droppable_demo.hover { 
		border:5px dashed orange; 
		background:#efefef; }

#dragContainer {
		background: yellow;
		border:5px solid black; 
		float: left;
		width: 60%;
		height: 120px;
		overflow: auto;  /*This is where the weirdness happens*/
}

h3 {
	color: white;
	float: left;
}
</style>


<div id="droppable_container">

	<div id="dragContainer">
		<div class="draggable" id="draggable_demo">
			DRAG ME!!!
		</div>
		<!-- space holders added to create overflow -->
		<div class="spaceHolder">
			Space Holder
		</div>
		<div class="spaceHolder">
			Space Holder
		</div>
		<div class="spaceHolder">
			Space Holder
		</div>
	</div>

  <div id="droppable_demo">
    Drop here!
  </div>

<h3>To reproduce this bug, in ie7 or lower scroll the yellow div#droppable_container</h3>

</div>



<script type="text/javascript">
  new Draggable('draggable_demo', { 
    revert: true,
		ghosting: true // this is needed to avoid the craziness of the overflowed div's scroll bars
  });

  Droppables.add('droppable_demo', { 
    accept: 'draggable',
    hoverclass: 'hover',
    onDrop: function() { $('droppable_demo').highlight(); }
  });

// These changes have been made to dragdrop.js
// Index: src/dragdrop.js
// ===================================================================
// --- src/dragdrop.js	(revision 8189)
// +++ src/dragdrop.js	(working copy)
// @@ -405,7 +405,7 @@
//      if(this.options.ghosting) {
//        if (!this.element._originallyAbsolute)
//          Position.relativize(this.element);
// -      delete this.element._originallyAbsolute;
// +      this.element._originallyAbsolute = null;
//        Element.remove(this._clone);
//        this._clone = null;
//      }

</script>

	
	
</body>
</html>


Comments and changes to this ticket

  • Phillip Sauerbeck

    Phillip Sauerbeck May 22nd, 2008 @ 02:45 AM

    • Title changed from “Draggables from an overflow:auto div in ie7 are stuck” to “Attaching the HTML”

    ...having some trouble attaching the html file to the ticket. Will try as a zip. Here is is inline:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/...">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    		<script src="/javascripts/prototype.js" type="text/javascript"></script>
    		<script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
    </head>
    <body>
    
    <style type="text/css">
    
    div#droppable_container{ 
    		margin-bottom: 30px;  
      	height:240px; 
      	width: 500px; 
      	background: #222222;
      	padding: 10px;
    	}  
    
    div#droppable_demo{ 
    	  width:160px; 
    	  height:120px; 
    		font-size: 15px;
    	  background:#ffffff; 
    	  border:5px solid #ccc; 
    	  text-align:center;
    	  float: right;
    	}
    
    #draggable_demo{
    		background: yellowgreen;
    		margin: 5px;
    		border: 3px solid green;
    		width: 100px;
    		height: 100px;
    		cursor: move;
    		font-size: 15px;
    		float: left;
    	}
    
    .spaceHolder {
    	background: orange;
    	margin: 5px;
    	border: 3px solid orangered;
    	width: 100px;
    	height: 100px;
    	font-size: 15px;
    	float: left;
    }
    
    div#droppable_demo.hover { 
    		border:5px dashed orange; 
    		background:#efefef; }
    
    #dragContainer {
    		background: yellow;
    		border:5px solid #222222; 
    		float: left;
    		width: 60%;
    		height: 120px;
    		overflow: auto;  /*This is where the weirdness happens*/
    }
    
    h3 {
    	color: white;
    	float: left;
    }
    </style>
    
    
    <div id="droppable_container">
    
    	<div id="dragContainer">
    		<div class="draggable" id="draggable_demo">
    			DRAG ME!!!
    		</div>
    		<!-- space holders added to create overflow -->
    		<div class="spaceHolder">
    			Space Holder
    		</div>
    		<div class="spaceHolder">
    			Space Holder
    		</div>
    		<div class="spaceHolder">
    			Space Holder
    		</div>
    	</div>
    
      <div id="droppable_demo">
        Drop here!
      </div>
    
    <h3>To reproduce this bug, in ie7 or lower scroll the yellow div#droppable_container</h3>
    
    </div>
    
    
    
    <script type="text/javascript">
      new Draggable('draggable_demo', { 
        revert: true,
    		ghosting: true // this is needed to avoid the craziness of the overflowed div's scroll bars
      });
    
      Droppables.add('droppable_demo', { 
        accept: 'draggable',
        hoverclass: 'hover',
        onDrop: function() { $('droppable_demo').highlight(); }
      });
    
    // These changes have been made to dragdrop.js
    // Index: src/dragdrop.js
    // ===================================================================
    // --- src/dragdrop.js	(revision 8189)
    // +++ src/dragdrop.js	(working copy)
    // @@ -405,7 +405,7 @@
    //      if(this.options.ghosting) {
    //        if (!this.element._originallyAbsolute)
    //          Position.relativize(this.element);
    // -      delete this.element._originallyAbsolute;
    // +      this.element._originallyAbsolute = null;
    //        Element.remove(this._clone);
    //        this._clone = null;
    //      }
    
    </script>
    
    	
    	
    </body>
    </html>
    
    
    
  • Phillip Sauerbeck

    Phillip Sauerbeck May 22nd, 2008 @ 02:46 AM

    • Title changed from “Attaching the HTML” to “Draggables from an overflow:auto div in ie7 are stuck”
  • Chris Williams

    Chris Williams June 14th, 2008 @ 09:12 PM

    Phillip and I have been working on enhancements to the library I had set up (dragdropextra.js) that fix this. I will add it to a fork of the code base when we have it stabilized.

  • Phillip Sauerbeck

    Phillip Sauerbeck August 13th, 2008 @ 06:23 PM

    • Tag set to drag, draggable, drop, ie7, overflow

    Here is a test case that demonstrates a fix for this bug:

    http://pastie.org/252270

    I'm not familiar at all with creating patches, so maybe someone else can pick up the baton here.

  • StonedSidney

    StonedSidney April 1st, 2009 @ 09:24 AM

    Hi, I just tried dragDrop.html in ie7 and unfortunately, once scrolled, the dragged image is badly offset (to it's original posn).

    This is easy to see if you add some more spacer divs before the draggable, scroll to it and drag.

    It seems to make no difference if I apply the patch to dragdrop.js or not (odd that). Should I be using a modified version (I use v1.8.1)?

    It works just fine in ff3 (linux & Vista).

  • chenlina1

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

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

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Attachments

Referenced by

Pages