• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2004
  • Last Modified:

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.
0
sabecs
Asked:
sabecs
  • 2
  • 2
1 Solution
 
SSupremeCommented:
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.
0
 
sabecsAuthor Commented:
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?
0
 
SSupremeCommented:
OK, I think you are looking for this:
   
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<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 />
<style type="text/css">
/*<![CDATA[*/

#container{font-size: 9px; background-color: #036; clear: left; overflow:hidden; width: 600px; margin: 0 auto; border: 1px solid #036;}
#top_icons{float:left; clear;both; overflow:hidden; min-height: 200px; width: 600px; background-color: #454;}
#bot_icons{float:left; clear;both; height: auto; overflow:hidden; width: 600px; background-color: #666;}
#sortable1, #sortable2 {list-style-type: none; float: left; margin: 0; padding: 0; width: 600px;}
#sortable1 li, #sortable2 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 type="text/javascript">
//<![CDATA[
        $(function() {
                $( "#sortable1, #sortable2" ).sortable({
                        connectWith: ".connectedSortable"
                }).disableSelection();
        });
//]]>
</script>
</head>
<body>
<div id="container">
<div id="top_icons">Top Container
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default"><a href="" target="_blank">one</a></li>
<li class="ui-state-default"><a href="" target="_blank">two</a></li>
<li class="ui-state-default"><a href="" target="_blank">three</a></li>
<li class="ui-state-default"><a href="" target="_blank">four</a></li>
<li class="ui-state-default"><a href="" target="_blank">five</a></li>
<li class="ui-state-default"><a href="" target="_blank">six</a></li>
<li class="ui-state-default"><a href="" target="_blank">seven</a></li>
<li class="ui-state-default"><a href="" target="_blank">eight</a></li>
</ul>
</div>
<div id="bot_icons">Bottom Container
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default"><a href="" target="_blank">nine</a></li>
<li class="ui-state-default"><a href="" target="_blank">ten</a></li>
<li class="ui-state-default"><a href="" target="_blank">eleven</a></li>
<li class="ui-state-default"><a href="" target="_blank">twelve</a></li>
<li class="ui-state-default"><a href="" target="_blank">13</a></li>
</ul>
</div>
</div>
<!-- End container -->
</body>
</html>

Open in new window

I modified it a little bit.
0
 
sabecsAuthor Commented:
That is fantastic, it is exactly what I was after.
Thank you very much SSupreme.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now