Opened 10 years ago
Closed 10 years ago
#9091 closed bug (duplicate)
Sortable - transform: rotate() dragging items don't follow cursor
| Reported by: | teynon | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | none |
| Component: | ui.sortable | Version: | 1.10.0 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
When using sortable() on an element that has been rotated through css's transform, the draggable objects do not follow the cursor. This may be a bug that exists in ALL browsers or jquery.
Tested with jQuery 1.9 and UI 1.10.0.
Affects IE 9, Chrome, & Firefox.
Tested on Windows 7.
<html>
<head>
<!-- jquery includes here -->
<script>
$(document).ready(function() {
$('.sortstuff').sortable({});
});
</script>
<style>
.sortstuff {
transform: rotate(270deg);
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Safari and Chrome */
-o-transform: rotate(270deg); /* Opera */
-moz-transform: rotate(270deg); /* Firefox */
}
.sortstuff div {
width: 50px;
height: 50px;
margin: 5px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="sortstuff">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
The css transform actually keeps the "top" as the original top. That means that rotating 90 degrees would put the top at right instead of the top. So moving the cursor up or down is applying left and right instead of up and down.
Change History (2)
comment:1 Changed 10 years ago by
comment:2 Changed 10 years ago by
| Resolution: | → duplicate |
|---|---|
| Status: | new → closed |
Duplicate of #6844.
Hi teynon,
Thanks for taking the time to contribute to the jQuery UI project.
Unfortunately the use of CSS transforms is not supported by jQuery UI. See http://contribute.jquery.org/wont-fix/ & #6844.
Thanks.
See http://jsfiddle.net/YFg28/ for an example