Sortable does not scroll
Sortable does not scroll
I have a similar import code:
<script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.sortable.js"></script>
and this javascript code:
$(document).ready(function() {
$("##listacolori").sortable({
opacity: .5,
placeholder: "placeholder",
cursor: "move",
axis: 'y',
update: function(event, ui) {
var colori = $(this).sortable('toArray').toString();
$("##ajxResult").html('Attendere prego...');
$.post("include/xxx/xxx.cfm",{
colorList: colori,
codice_occhiale: "#qryColori.codice#"
},
function() { $("##ajxResult").html('Ordinamento colori aggiornato!'); });
}
});
});
Here's some of my CSS:
<style type="text/css">
.column {
float:left;
margin-right:10px;
}
ul {
padding:0;
list-style:none;
}
li.cell {
height:60px;
margin:5px 0px 5px 0px;
padding:5px 0px 0px 5px;
border:1px solid #EDF0F4;
}
#listacolori li {
border:1px solid #444;
background-color:#FFF;
-moz-border-radius:10px;
width:400px;
}
.placeholder {
height:60px;
margin:5px 0px 5px 0px;
padding:5px 0px 0px 5px;
border:1px solid #EDF0F4;
background-color:#FFC;
-moz-border-radius:10px;
width:400px;
}
</style>
In my layout there's a column containing the sortable list. In the end a clear:both.
All works fine.
But... auto-scrolling of pages doesn't work. Dragging to the bottom a <li> doesn't make page scroll down.
What can cause non-scrolling of the page in presence of a sortable/draggable?
What can I check?
Thanks a lot everyone!