#9091 closed bug (duplicate)

Opened February 17, 2013 07:38AM UTC

Closed February 17, 2013 11:46AM UTC

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.

Attachments (0)
Change History (2)

Changed February 17, 2013 07:55AM UTC by teynon comment:1

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

Changed February 17, 2013 11:46AM UTC by tj.vantoll comment:2

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.