Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#8349 closed bug (fixed)

Draggable: Incorrect dimensions used if .ui-draggable-dragging changes dimensions

Reported by: non4eg Owned by: non4eg
Priority: minor Milestone: 1.8.21
Component: ui.draggable Version: 1.8.20
Keywords: Cc:
Blocked by: Blocking:

Description

If a wide drag element is placed into some fixed-width container, it is not dropped into the container and it doesn’t show any event or error. The drag element has some styles (.ui-draggable-dragging) with max-width property applied. This “feature” is not observed if the drag element initially has a width property value that is less than maximum.

Change History (9)

comment:1 Changed 8 years ago by Scott González

Owner: set to non4eg
Status: newpending

Please provide a reduced test case showing the problem.

comment:2 in reply to:  1 Changed 8 years ago by non4eg

Status: pendingnew

Replying to scott.gonzalez:

Please provide a reduced test case showing the problem.

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/start/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>

	</head>
	<body>
		
		<div class="drop-area">&nbsp;<p>Drop here!</p></div>
		
		<table>
			<tr>
				<td>
					<div class="graged">
						<a href="#">

							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

						</a>
					</div>
				</td>
				<td>
					<div class="graged">
						<a href="#">

							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

						</a>
					</div>
				</td>
				<td>
					<div class="graged">
						<a href="#">

							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

						</a>
					</div>
				</td>
				<td>
					<div class="graged">
						<a href="#">

							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

						</a>
					</div>
				</td>
				<td>
					<div class="graged">
						<a href="#">

							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

						</a>
					</div>
				</td>				
			</tr>
		</table>
		
		<style>
			.drop-area
			{
				min-width:300px;
				background: #aaa;
				border:1px solid #444;
				max-width:250px;
				margin:0 auto;
			}
			
			.graged
			{
				display: block;
				background: #f30000;
				padding:10px;
			}
			
			.ui-draggable-dragging
			{
				max-width:300px;
				max-height:100px;
				font-size: 50%;
				overflow:hidden;
			}
			
			.ui-state-active
			{
				background: #eee;
			}
		</style>
		<script>
		
			$(".drop-area").droppable({
				accept: '.graged',
				hoverClass: "ui-state-active",
				drop: function(event, ui) {}
			});
			
			$(".graged").draggable({
				revert: false,
				helper: "clone"
			});
			
		
		</script>
	
	</body>
</html>
Version 0, edited 8 years ago by non4eg (next)

comment:3 Changed 8 years ago by Scott González

Whoa, please read the red box that says not to paste large blocks of code in to tickets.

comment:5 in reply to:  3 Changed 8 years ago by non4eg

Replying to scott.gonzalez:

Whoa, please read the red box that says not to paste large blocks of code in to tickets.

Sorry :)

comment:6 Changed 8 years ago by Scott González

Status: newopen
Summary: Wide element Drag-n-Drop doesn't work properlyDraggable: Incorrect dimensions used if .ui-draggable-dragging changes dimensions

An actually reduced test case: http://jsbin.com/otarik/2/edit

comment:7 Changed 8 years ago by Viktar Varvanovich

Resolution: fixed
Status: openclosed

Draggable: Apply ui-draggable-dragging class prior to calculating dimensions. Fixes #8349 - Draggable: Incorrect dimensions used if .ui-draggable-dragging changes dimensions

Changeset: a0c18ea25086ed07634baff5b4fea46e69aad38e

comment:8 Changed 8 years ago by Viktar Varvanovich

Draggable: Apply ui-draggable-dragging class prior to calculating dimensions. Fixes #8349 - Draggable: Incorrect dimensions used if .ui-draggable-dragging changes dimensions (cherry picked from commit a0c18ea25086ed07634baff5b4fea46e69aad38e)

Changeset: 168a21d5ef3e0df0f03aa860ae798a8f7de35210

comment:9 Changed 8 years ago by Scott González

Milestone: 1.91.8.21
Note: See TracTickets for help on using tickets.