Bug Tracker

Modify

Ticket #2837 (closed bug: invalid)

Opened 6 years ago

Last modified 2 years ago

jQuery.Sortable Tolerance: "pointer" problem

Reported by: LeoLeal Owned by: paul
Priority: major Milestone: 1.2.4
Component: ui Version: 1.2.3
Keywords: Sortable Cc:
Blocking: Blocked by:

Description

Hi friends,

I have this sortable list with Items contaning different data, making them different from eachother in height. So a bigger Item can only be properly sorted using tolerance:"pointer" as I read in another ticket.

The problem is that when you move a smaller item over a bigger item when trying to change It's position to below or above the bigger Item, when the Pointer reaches close to the bigger Item's height, the Placeholder stays undecided where to appear, so the destination spot of the smaller Item starts to flicker.

I take It's because the code uses the item's top coordinate to calculate wheter the Item beign sorted goes above or below the current Item you're hovering, and the Placeholder changed It's top coord., screwing up the formula.

Fast way to reproduce It:

Create 3 divs in a sortable div container (using tolerance:"pointer" so U can sort the Bigger DIV above the Smaller one), two with 2 line of text and one with 20 Lines of Test.

Try to slowly sort one of the Smaller DIVs against the bigger one and U'll see the Placeholder Flickering once the Smaller div touches the middle of the bigger one.

Change History

comment:1 Changed 6 years ago by LeoLeal

Code Example:

Markup (Dont forget to import jQuery Files) :)

<style type="text/css">
.container{
	position: relative;
	width: 300px;
	float: left;
	margin: 0;
	padding: 0;
	border:1px solid #cccccc;
	list-style:none;
}
.itemDrag {
	background-color:#ffffff;
	width: 290px;
	margin: 5px;
	height: inherit;
	border: 2px solid #ccc;
	padding: 0px;
}
.dragAjuda {
	position: relative;
	border: 2px dashed #ad7db9;
	background-color:#efefef;
}
.handle{
	cursor:move;
	background-color: yellow;
}
#bottomControls{
	position:fixed;
	bottom:0px;
}
.hoverItem{
	border:2px dashed #cc3333;
}

.gadgetCabecalho{
	font-size:1.4em;
	font-weight:bold;
}
</style>
<script>
	$(window).bind("load",function(){
		$("#container1,#container2,#container3").sortable({
			connectWith: $(".container"),
			revert: true,
			tolerance: "pointer",
			opacity: 0.7,
			scroll:true,
			cursor:"move",
			placeholder:"dragAjuda",
			zIndex:3000,
			handle:".handle"
		});
	});
</script>
<div class="container" id="container1">
	<div id="item1" class="itemDrag"><div class="handle">mover</div>
		Drag1	</div>
	<div id="item2" class="itemDrag"><div class="handle">mover</div>
		Drag2	</div>
	<div id="item3" class="itemDrag"><div class="handle">mover</div>
		Drag3	</div>	
</div>
<div class="container" id="container2">
	<div id="item4" class="itemDrag"><div class="handle">mover</div>
		Drag4	</div>
	<div id="item5" class="itemDrag"><div class="handle">mover</div>
		Drag5	</div>
	<div id="item6" class="itemDrag"><div class="handle">mover</div>
		Teste Teste Teste Teste Teste Teste <br />
		Teste Teste Teste Teste Teste Teste <br />Teste Teste Teste Teste Teste Teste <br />
		Teste Teste Teste Teste Teste Teste <br />Teste Teste Teste Teste Teste Teste <br />
		Teste Teste Teste Teste Teste Teste <br />Teste Teste Teste Teste Teste Teste <br />
		Teste Teste Teste Teste Teste Teste <br />Teste Teste Teste Teste Teste Teste <br />
		Teste Teste Teste Teste Teste Teste <br />Teste Teste Teste Teste Teste Teste <br />
		Teste Teste Teste Teste Teste Teste <br />Teste Teste Teste Teste Teste Teste <br />
	</div>	
</div>
<div class="container" id="container3">
	<div id="item7" class="itemDrag"><div class="handle">mover</div>
		Drag7</div>
</div>

comment:2 Changed 6 years ago by xoli202

I have tested the last updates of sortable.js related to this ticket.

When you click over an element (of the sortable list) and you try drag it, at the bottom of the list sometimes apears a duplicate of the element.

I think your solution ("guess" tolerance) its not consistent because in same sortable could be used different tolerances ("pointer" or "intersect") accoding to element sizes, and in my opinion it's not a good solution.

comment:3 Changed 4 years ago by dmethvin

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

This should be filed in the UI bug tracker if still relevant.

 http://dev.jqueryui.com

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.