Hi.
I'm working on an article module and have stumbled upon a problem. I'm
having several connected lists and need to float the li elements in two of
the three connected lists. I'm able to reoder the lists internally, and to
move elements from the lists with floated li's to a list where the elements
are not floated, but not into a list with floating li's.
Hope that som of the more experienced jQueriers can help me out!
I've attached a picture of how it looks and here is the code of my mockup:
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Sortable - Default functionality</title>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet"
/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.7.1.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css"
rel="stylesheet" />
<style type="text/css">
#sortable1, #sortable2, #sortable3, #static1, #static2 {
list-style-type:
none; margin: 0; padding: 0; clear: both;}
#sortable1 li, #sortable2 li, #sortable3 li, #static1 li,
#static2 li {
width: 30%; float: left; margin: 5px; padding: 5px; padding-left: 1em;
font-size: 1.2em; }
#sortable2 li {
background:#FBF9EE
url(images/ui-bg_glass_55_fbf9ee_1x400.png) repeat-x
scroll 50% 50%;
border:1px solid #FCEFA1;
color:#363636;
}
#sortable1 li.ui-sortable-helper, #sortable2
li.ui-sortable-helper,
#sortable3 li.ui-sortable-helper { }
.left { width: 45%; float: left; border: 1px solid #ccc; }
.right { width: 45%; float:right; border: 1px solid #ccc; }
.right ul { min-height: 18px; }
.left h5, .right h5 { margin: 5px 0; font-family: Georgia;
text-transform:
uppercase; text-align: center; font-size: 1.1em;}
#sortable1 li span, #sortable2 li span, #sortable3 li span,
#static1 li
span { position: absolute; margin-left: -1em;}
#sortable1 li:first-child { width: 70%; clear: both;}
#static1 { min-height: 35px; border: 1px solid grey; clear:
both;}
#static1 li { border: 1px solid #000; width: 40%; float: left;
clear:
right; }
#static li:first-child { clear: left; }
.staticBox {
clear: both;
background:#444
url(images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x
scroll 50% 50%;
border:1px solid #grey;
color:#DDD;
font-weight:normal;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
margin: 5px; padding: 5px; padding-right: 1em;
font-size: 1.2em;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#sortable1, #sortable2,
#sortable3").sortable({
connectWith: '.connectedSortable',
revert: true,
cursor: 'move'
}).disableSelection();
});
$(function() {
$("#static1, #static2").sortable({
connectWith: '.connectedStatic',
revert: true,
cursor: 'move'
}).disableSelection();
});
function serializeLists() {
return
$('#sortable1').sortable('serialize')+'&'+$('#sortable2').sortable('serialize')+'&'+$('#sortable3').sortable('serialize');
}
$('#sortable1').bind('sortremove', function(event, ui) {
$('#sortable1').append($('#sortable2
li:first').remove());
});
$('#sortable1').bind('sortreceive', function(event, ui)
{
$('#sortable2').prepend($('#sortable1
li:last').remove());
});
$('#sortable1').bind('sortupdate', function(event, ui) {
alert(serializeLists());
});
$('#sortable2').bind('sortupdate', function(event, ui) {
alert(serializeLists());
});
});
</script>
</head>
<body>
<div>
<div class="left ui-corner-all">
<h5>Sideflyt</h5>
<ul id="sortable1" class="connectedSortable">
<li id="set_1" class="ui-state-default">Item 1</li>
<li id="set_2" class="ui-state-default">Item 2</li>
<li id="set_3" class="ui-state-default">Item 3</li>
<li id="set_4" class="ui-state-default">Item 4</li>
<li id="set_5" class="ui-state-default">Item 5</li>
</ul>
<ul id="static1" class="connectedStatic">
</ul>
<ul id="sortable2" class="connectedSortable">
<li id="set_6" class="ui-state-default">Item 6</li>
<li id="set_7" class="ui-state-default">Item 7</li>
<li id="set_8" class="ui-state-default">Item 8</li>
<li id="set_9" class="ui-state-default">Item 9</li>
<li id="set_10" class="ui-state-default">Item 10</li>
</ul>
</div>
<div class="right ui-corner-all">
<h5>Ikke publisert</h5>
<ul id="sortable3" class="connectedSortable">
</ul>
<h5>Statiske bokser</h5>
<ul id="static2" class="connectedStatic">
<li id="set_11" class="ui-state-default">Static 1</li>
<li id="set_12" class="ui-state-default">Static 2</li>
<li id="set_13" class="ui-state-default">Static 3</li>
</ul>
</div>
</div>
</body>
</html> http://www.nabble.com/file/p23448937/Bilde%2B1.png Bilde+1.png
--
View this message in context:
http://www.nabble.com/Problem-with-float%3Aleft--on-i-in-multiple-sortable-lists-tp23448937s27240p23448937.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
