#10 new
Phillip Sauerbeck

Draggables from an overflow:auto div in ie7 are stuck

Reported by Phillip Sauerbeck | May 22nd, 2008 @ 02:37 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 changed from “” 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.

Please Login or create a free account to add a new comment.

You can update this ticket by sending an email to from your email client. (help)

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.

Source available from github
The Git repository resides at:
http://github.com/madrobby/scriptaculous

Check out the current development trunk with:
git clone git://github.com/madrobby/scriptaculous.git

As script.aculo.us 1.xx is feature-frozen, this development trunk is for bugfixes only.

New development should happen only for
script.aculo.us 2.

Creating a bug report
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, alter the unit tests and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Attachments

Tags