#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 follow-up: 2 Changed 11 years ago by
| Owner: | set to non4eg |
|---|---|
| Status: | new → pending |
comment:2 Changed 11 years ago by
| Status: | pending → new |
|---|
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"> <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 11 years ago
by
(next)
comment:3 follow-up: 5 Changed 11 years ago by
Whoa, please read the red box that says not to paste large blocks of code in to tickets.
comment:5 Changed 11 years ago by
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 11 years ago by
| Status: | new → open |
|---|---|
| Summary: | Wide element Drag-n-Drop doesn't work properly → Draggable: Incorrect dimensions used if .ui-draggable-dragging changes dimensions |
An actually reduced test case: http://jsbin.com/otarik/2/edit
comment:7 Changed 11 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | open → closed |
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 11 years ago by
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 11 years ago by
| Milestone: | 1.9 → 1.8.21 |
|---|
Note: See
TracTickets for help on using
tickets.
Please provide a reduced test case showing the problem.