Jquery UI Sortable issues
Alright here is my problem...
I took the Jquery Sortable demo and tried to make it work for me... i'm using the 1.5.3 b/c its stable and seems to work...
The issue i'm having is that i am try to change the ul li list so that its not just one item after the next. I would like 3-4 items in a row - "floating"?
"All Items" - should be 3-4 items in a row and "Items in cat/arc" should be only one item per row...
Well i tried to do that, and it kinda worked however when i go to drag the items back from "Items in cat/arc" it won't come back over?!
Any ideas?
Code:
-
<!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>Test Dragging</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/ecmascript" src="ui.core.js"></script>
<script language="javascript" type="text/ecmascript" src="ui.sortable.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#AllItems").sortable({
placeholder: "ui-selected",
connectWith: ["#UsingItems"]
});
$("#UsingItems").sortable({
placeholder: "ui-selected",
connectWith: ["#AllItems"]
});
});
</script>
<style>
#AllItemContainer {
float:left;
border:1px solid #CCCCCC;
width:300px;
}
#UsingItemsContainer {
float:left;
margin-left:5px;
width:150px;
border:1px solid #CCCCCC;
}
#sortable-ex {
min-height:110px;
min-height:110px;
max-height:350px;
width:600px;
margin:auto;
overflow:auto;
margin-top:20px;
}
.sortable-container li {
margin: 0;
border: 0;
outline: 0;
list-style:none;
background: #EAEAEA;
font-size: 12px;
margin:2px;
padding: 3px;
width: 100px;
text-align:center;
float:left;/* - PROBLEM! -*/
display:block;
position:relative;
}
#AllItems {
cursor: hand;
cursor: pointer;
width:300px;
margin:0px;
margin-left:-20px;
}
#UsingItems {
margin:0px;
margin-left:-20px;
cursor:hand;
cursor:pointer;
width:150px;
min-height:150px;
min-width:150px;
}
li:hover {
background-color:#FFFF99;
cursor:move;
}
.ui-selected {
background-color: #E6F7D4;
}
</style>
</head>
<body>
<div class="sortable-container">
<div id="sortable-ex">
<div align="center" style="clear:both;">
<input type="button" name="Save" id="Save" value="Save!" onclick="alert($('#UsingItems').sortable('toArray'))" />
</div>
<div id="AllItemContainer">
All Items
<ul id="AllItems">
<li id='Ionizer'>
Ionizer<br />
<img src="../images/general/image.jpg" height="50" width="50" />
</li>
<li id='Flocker'>
Flocker<br />
<img src="../images/general/image.jpg" height="50" width="50" />
</li>
<li id='WEEEE'>
WEEEE<br />
<img src="../images/general/image.jpg" height="50" width="50" />
</li>
<li id='Narly'>
Narly<br />
<img src="../images/general/image.jpg" height="50" width="50" />
</li>
<li id='Quicnt'>
Quicnt<br />
<img src="../images/general/image.jpg" height="50" width="50" />
</li>
<li id='WAAA'>
WAAAA<br />
<img src="../images/general/image.jpg" height="50" width="50" />
</li>
<li id='WOW'>
WOW<br />
<img src="../images/general/image.jpg" height="50" width="50" />
</li>
</ul>
</div>
<div id="UsingItemsContainer">
Items in cat/arc
<ul id="UsingItems">
</ul>
</div>
<br style="clear: both;">
</div>
</div>
</body>
</html>
Thanks guys![/code]