asked on

JQuery UI sortable - move between divs?

Hi,
I am using a jQuery UI sortable, http://jqueryui.com/demos/sortable/

Is it possible to adjust the code below so that you can drag items between top and bottom container DIV's?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>

<meta charset="utf-8">
<style>

#container{
	font-size: 9px;
	background-color: #036;
	clear: left;
	height: auto;
	width: 600px;
	margin: 0 auto;
	border: 1px solid #036;	
}

#top_icons{
	    float:left;
		clear;both;
		height: auto;
		min-height: 200px;
	    width: 600px;
		background-color: #454;
}

#bot_icons{
		float:left;
		clear;both;
		height: auto;
		min-height: 200px;
	    width: 600px;
		background-color: #666;
}

#sortable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 600px;

}

#sortable li {
	float: left;
	width: 130px;
	height: 130px;
	font-size: 18px;
	margin:5px;
	text-align: center;
	background-color: #f3f3f3;
	background-image: url(/images/drag_drop_icon.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.ui-state-default a:link, a:active, a:visited, a:hover{
	clear: none;
	float: left;
	height: 100px;
	width: 120px;
	border: 1px dotted #999;
	background-color: #f3f3f3;
    margin:5px;
}
    
    </style>
	<script>
	$(function() {
		$( "#sortable" ).sortable({'update':function(){
			position = new Array();
			$i = 0;
			$(".ui-state-default").each(function(){
				position[$i] = $(this).attr('item_id');
			$i++;
			});
				$.post("arrange_icons.php", { position: ""+position+"" },
					function(data){
						//alert(data);
				});
		}});
		$( "#sortable" ).disableSelection();
	});
	
</script>
</head>

<body>


<div id="container">

<div id="top_icons">
Top Container
<ul id="sortable">
	    <li class="ui-state-default" item_id='1'><a href="" target="_blank">one</a></li>        
	    <li class="ui-state-default" item_id='2'><a href="" target="_blank">two</a></li>        
	    <li class="ui-state-default" item_id='3'><a href="" target="_blank">three</a></li>        
        <li class="ui-state-default" item_id='4'><a href="" target="_blank">four</a></li>
	    <li class="ui-state-default" item_id='5'><a href="" target="_blank">five</a></li>
	    <li class="ui-state-default" item_id='6'><a href="" target="_blank">six</a></li>
	    <li class="ui-state-default" item_id='7'><a href="" target="_blank">seven</a></li>
	    <li class="ui-state-default" item_id='8'><a href="" target="_blank">eight</a></li>
	</ul>
</div>

<div id="bot_icons">

Bottom Container


</div>
</div><!-- End container -->

Open in new window

Thanks.

SSupreme

I think you are looking for different functionality, It isn't possible to adjust markup to your needs. You can have a look at this plug-in here.

sabecs

ASKER

Thanks SSupreme, for your feedback.
I am after the functionilty of sortable which allows me to change the order of my items, but I also want to move items that are not used often to another div, which I can then hide/display the div.

Do you think it might be possible to rewritie the actual HTML with another language such as PHP when an item get dragged out of its original DIV container?

ASKER CERTIFIED SOLUTION

SSupreme

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sabecs

ASKER

That is fantastic, it is exactly what I was after.
Thank you very much SSupreme.