Jump to content

JQuery UI Sortable Issue


shadowayex
 Share

Recommended Posts

I'm trying to use the JQuery UI sortable feature, but I'm having problems. It seems that if I change the display property on the sortable elements, the thing glitches a bit.I'm on a private server, so I can't give you a site to see what's happening, but I can give you the code I'm playing with:JQuery:

$(document).ready(	function()	{			$("div.widget-board").sortable(			{				addClasses: false,				containment: "parent",				handle: "p.mover",				revert: true,				stack: "div.widget",				tolerance: "pointer"			}		);	});

CSS:

div.widget{	background-color: white;	border: 2px solid black;	display: inline-block;						height: 200px;	margin: 20px;	width: 200px;}

HTML:

<div class="widget-board">	<div class="widget">		<p class="mover">Move me</p>		<p>I'm a widget</p>	</div>	<div class="widget">		<p class="mover">Move me</p>		<p>I'm another widget</p>	</div></div>

When you try to sort them horizontally, the one you're swapping with (not the one you are dragging) jumps down a little. Anyone know why this is happening?Edit It's probably worth noting that I use these external scripts:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

Edited by ragae
Link to comment
Share on other sites

why did you change the display? Are you trying to get them all on one line? You might want to consider floating them instead.
When I tried floating them once, it broke (a glitch of the same manner-ish). But it seems to work on now.Thanks =) Edited by ragae
Link to comment
Share on other sites

I'm doing this on a different machine, and the float bug is present here.When I try to move divs after applying a float: right, the element will move to be above the container. I can drag it back and forth up there, but it does not enter back into the container, and it does not do any switching.Edit: The answer to this issue is that if you float the divs and don't set a height for the container, it will become zero, thus creating issues if you set the container option to parent. I set a height on the parent and it works fine now.

Edited by ragae
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...