#2976 closed bug (fixed)

Opened June 09, 2008 08:33AM UTC

Closed June 24, 2008 08:13PM UTC

Last modified June 26, 2008 07:07PM UTC

Sortable Issues

Reported by: paladin.rithe@gmail.com Owned by: paul
Priority: major Milestone: 1.5.1
Component: ui.sortable Version: 1.5
Keywords: Cc:
Blocked by: Blocking:
Description

Some test markup is listed at the bottom, using jQuery 1.2.6, and UI 1.5-RC1.

I have 3 main issues that I'm having with this markup. It's all divs, had it at lists before and it does the same thing.

If you move one of the green sortables into one of the areas above it, when stuff is moved for the placeholder, the one you are dragging moves as well, leaving the mouse above it. I think it is similar, if not the same as this one.

If you click on the orange area, it grabs the whole area. I tried to create a handle in the brown, but that isn't working (I may have it wrong though). Otherwise, it seems the handle isn't working properly.

In the same vein, moving the block by dragging with the orange area makes it droppable IN another one of the blocks. If the handle worked, this would be eliminated. It throws an error in FireBug:

Node cannot be inserted at the specified point in the hierarchy"  code: "3
http://localhost/js/jquery-1.2.6.js
Line 257

It looks to be the same as this issue.

<!DOCTYPE HTML PUBdivC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script src="js/jquery-1.2.6.js"></script>
	<script src="js/ui.core.js"></script>
	<script src="js/ui.draggable.js"></script>
	<script src="js/ui.sortable.js"></script>
	
	<script>
		$(document).ready(function(){
			$(".chapList").sortable({ items: ".chapter", revert: "true", handle: ".chapHandle" });
			$(".pageList").sortable({ items: ".page", revert: "true", connectWith: [".pageList"] });
		});
	</script>
	
	<style>
		.chapList {
			width: 40em;
		}
		
		#unsorted {
			width: 40em;
		}
		
		.chapter {
			background-color: orange;
			width: 30em;
			border: solid 1px red;
			margin: 0 auto 0 auto;
		}
		
		.chapHandle {
			background-color: brown;
		}
		
		.pageList {
		}
		
		.page {
			background-color: lightgreen;
			width: 20em;
			border: solid 1px blue;
			margin: 0 auto 0 auto;
		}
		
		.pageText {
			font-size: .5em;
		}
	</style>
</head>
<body>

<div class="chapList">
	<div class="chapter">
		<div class="chapHandle">
			<span class="chapNum">Chapter 1</span>
			<span class="chapTitle">The Temple of Doom</span>
		</div>

		<div class="pageList">
			<div class="page">
				Page 1
			</div>

			<div class="page">
				Page 2
			</div>

			<div class="page">
				Page 3
			</div>

			<div class="page">
				Page 4
			</div>
		</div>
	</div>

    <div class="chapter">
		<div class="chapHandle">
			<span class="chapNum">Chapter 2</span>
			<span class="chapTitle">Raiders of the Lost Ark</span>
		</div>
		
		<div class="pageList">
			<div class="page">
				Page 5
			</div>
			
			<div class="page">
				Page 6
			</div>
			
			<div class="page">
				Page 7
			</div>
			
			<div class="page">
				Page 8
			</div>
		</div>
	</div>
	
    <div class="chapter">
		<div class="chapHandle">
			<span class="chapNum">Chapter 3</span>
			<span class="chapTitle">The Last Crusade</span>
		</div>
		
		<div class="pageList">
			<div class="page">
				Page 9
			</div>
			
			<div class="page">
				Page 10
			</div>
			
			<div class="page">
				Page 11
			</div>
			
			<div class="page">
				Page 12
			</div>
		</div>
	</div>
	
    <div class="chapter">
		<div class="chapHandle">
			<span class="chapNum">Chapter 4</span>
			<span class="chapTitle">The Kingdom of the Crystal Skull</span>
		</div>
		
		<div class="pageList">
			<div class="page">
				Page 13
			</div>
			
			<div class="page">
				Page 14
			</div>
			
			<div class="page">
				Page 15
			</div>
			
			<div class="page">
				Page 16
			</div>
		</div>
	</div>
</div>

Unsorted Pages
<div id="unsorted" class="pageList">
	<div class="page">
		Page #
	</div>
	
	<div class="page">
		Page #
	</div>
	
	<div class="page">
		Page #
	</div>
	
	<div class="page">
		Page #
	</div>
</div>

</body>
</html>
Attachments (0)
Change History (2)

Changed June 24, 2008 08:13PM UTC by paul comment:1

resolution: → fixed
status: new → closed

Thanks a lot for your detailed blog post, it helped a lot in finding and resolving your issues. All issues should be fixed in r326 of ui.sortable.js.

Changed June 26, 2008 07:07PM UTC by paul comment:2

milestone: 1.5 → 1.5.1
version: → 1.5