#5047 closed bug (worksforme)

Opened January 07, 2010 08:58AM UTC

Closed January 15, 2010 10:55AM UTC

Last modified October 11, 2012 09:15PM UTC

draggable in IE7+ freezes after stop:

Reported by: tiger.my Owned by:
Priority: blocker Milestone:
Component: ui.draggable Version: 1.7.2
Keywords: IE draggable stop freeze Cc: harimaux@gmail.com
Blocked by: Blocking:
Description

The following line:

$(".droppable").css( "background-color", "grey" );

called in the stop event handler for draggable,

causes the draggable element to freeze (only in IE).

The full code as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link type="text/css" href="jq/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="jq/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="jq/jquery-ui-1.7.2.custom.min.js"></script>
	  <style type="text/css">
		.draggable { width: 180px; height: 145px; background: white; border-style : solid; border-color : silver; border-width : 1px; padding: 10px; }
		.droppable { position: absolute; left: 250px; top: 0; width: 225px; height: 160px; background: gray; color: white; padding: 10px; }
	  </style>
  <script type="text/javascript">

$(document).ready(function(){
    $(".draggable").draggable({
			start: function (ev, ui) { 
				$(this).css( { 'background-color' : 'yellow', 'color': 'red' } ); 
				$(".droppable").css( "background-color", "green"); 
			},
			stop: function (ev, ui) { 
				$(this).css( { 'background-color' : 'white', 'color': 'black' } ); 
				$(".droppable").css( "background-color", "grey" ); 
			}
		});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div class="droppable" style="left:250px; top:100px;" id="droppable1">Droppable 1</div>
<div class="draggable" style="left:10px; top:150px;" id="draggable1">Draggable 1</div>

</body>
</html>
Attachments (0)
Change History (3)

Changed January 15, 2010 10:52AM UTC by jzaefferer comment:1

description: The following line: \ $(".droppable").css( "background-color", "grey" ); \ called in the stop event handler for draggable, \ causes the draggable element to freeze (only in IE). \ \ \ The full code as follows: \ \ \ <!DOCTYPE html> \ <html> \ <head> \ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> \ <link type="text/css" href="jq/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> \ <script type="text/javascript" src="jq/jquery-1.3.2.min.js"></script> \ <script type="text/javascript" src="jq/jquery-ui-1.7.2.custom.min.js"></script> \ <style type="text/css"> \ .draggable { width: 180px; height: 145px; background: white; border-style : solid; border-color : silver; border-width : 1px; padding: 10px; } \ .droppable { position: absolute; left: 250px; top: 0; width: 225px; height: 160px; background: gray; color: white; padding: 10px; } \ </style> \ <script type="text/javascript"> \ \ $(document).ready(function(){ \ $(".draggable").draggable({ \ start: function (ev, ui) { \ $(this).css( { 'background-color' : 'yellow', 'color': 'red' } ); \ $(".droppable").css( "background-color", "green"); \ }, \ stop: function (ev, ui) { \ $(this).css( { 'background-color' : 'white', 'color': 'black' } ); \ $(".droppable").css( "background-color", "grey" ); \ } \ }); \ }); \ </script> \ </head> \ <body style="font-size:62.5%;"> \ \ <div class="droppable" style="left:250px; top:100px;" id="droppable1">Droppable 1</div> \ <div class="draggable" style="left:10px; top:150px;" id="draggable1">Draggable 1</div> \ \ </body> \ </html> → The following line: \ $(".droppable").css( "background-color", "grey" ); \ called in the stop event handler for draggable, \ causes the draggable element to freeze (only in IE). \ \ \ The full code as follows: \ \ {{{ \ <!DOCTYPE html> \ <html> \ <head> \ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> \ <link type="text/css" href="jq/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> \ <script type="text/javascript" src="jq/jquery-1.3.2.min.js"></script> \ <script type="text/javascript" src="jq/jquery-ui-1.7.2.custom.min.js"></script> \ <style type="text/css"> \ .draggable { width: 180px; height: 145px; background: white; border-style : solid; border-color : silver; border-width : 1px; padding: 10px; } \ .droppable { position: absolute; left: 250px; top: 0; width: 225px; height: 160px; background: gray; color: white; padding: 10px; } \ </style> \ <script type="text/javascript"> \ \ $(document).ready(function(){ \ $(".draggable").draggable({ \ start: function (ev, ui) { \ $(this).css( { 'background-color' : 'yellow', 'color': 'red' } ); \ $(".droppable").css( "background-color", "green"); \ }, \ stop: function (ev, ui) { \ $(this).css( { 'background-color' : 'white', 'color': 'black' } ); \ $(".droppable").css( "background-color", "grey" ); \ } \ }); \ }); \ </script> \ </head> \ <body style="font-size:62.5%;"> \ \ <div class="droppable" style="left:250px; top:100px;" id="droppable1">Droppable 1</div> \ <div class="draggable" style="left:10px; top:150px;" id="draggable1">Draggable 1</div> \ \ </body> \ </html> \ }}}

Changed January 15, 2010 10:55AM UTC by jzaefferer comment:2

resolution: → worksforme
status: new → closed

Looks like IE6 doesn't like "grey" as a color value. It works fine with "gray".

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:3

milestone: TBD

Milestone TBD deleted