Sortable droppable mouse-detection problem
I use jQuery-ui to create a sortable list. Now, it's also droppable.
It is set correctly to my knowledge but it just won't detect any
draggables hovering or dropping onto them. What am I doing wrong? Has
it got something to do with the UL and LI being floated to the left?
File excerpts:
/*************************************************/
/* CSS
/*************************************************/
.sortableHover {
background: #000;
}
div.emptyBlock {
display: block;
float: left;
border: 1px solid #000;
background: #fff;
padding: .5em;
margin: 2px .5em;
}
ul#import_order_ul {
float: left;
display: box;
margin: .5em 0;
padding: 0;
border: 1px solid #666;
}
ul#import_order_ul li {
display: block;
float: left;
border: 1px solid #000;
background: #fff;
padding: .5em;
margin: 2px .5em;
}
/*************************************************/
/* JS
/*************************************************/
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(".emptyBlock").draggable({helper: "clone"});
$("ul#import_order_ul").droppable({
accept: ".emptyBlock",
drop: function() {
$(this).append("<li>*</li>");
},
hover: function() {
alert("test");
}
}).sortable({
hoverClass: "sortableHover",
update: function() {
var import_order = "";
$("#import_order_ul").children().each(function() {
import_order = import_order + ";" + $(this).text();
});
$("#import_order").val(import_order);
}
});
});
//]]>
</script>
/*************************************************/
/* XHTML
/*************************************************/
<label for="import_order">Volgorde data:</label>
<input type="hidden" name="import_order" id="import_order"
value=";Voornaam;Tussenvoegsel;Achternaam;Klas;Cluster(s);Telefoonnummer;Leerlingnummer" /