Ticket #2976 (closed bug: fixed)

Opened 6 years ago

Last modified 6 years ago

Sortable Issues

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

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>

Change History

comment:1 Changed 6 years ago by paul

  • Status changed from new to closed
  • Resolution set to fixed

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.

comment:2 Changed 6 years ago by paul

  • Version set to 1.5
  • Milestone changed from 1.5 to 1.5.1
Note: See TracTickets for help on using tickets.