Opened 6 years ago

Closed 6 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 6 years ago by teynon

See ​http://jsfiddle.net/YFg28/ for an example

comment:2 Changed 6 years ago by tj.vantoll

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.

Note: See TracTickets for help on using tickets.