I have a number of divs on a page with overflow:auto, many have more li's than fit in the visible area. When I drag and drop from one div to another, if the div above the target div has a long list, $(this) will return the id of that div rather than the div where my item has landed. Visually and in the revised html it works fine, but I need to be able to get the id of the div where it landed and can't seem to figure it out. Seems like there must be a workaround???
My goal is to reliably grab the id of the receiving div. The location hasn't changed by the time the drop event fires. Maybe it would work to intialize each droppable div by id in reverse order, rather than using the class 'sortable', but there can be 10 or 15 of them, and it seems awfully clumsy.
Here's my init code (after trying gre开发者_如何学Goedy:true):
$( ".sortable" ).sortable({
connectWith : ['.sortable'],
dropOnEmpty : true,
placeholder : "ui-state-highlight",
revert: true,
start : function(event, ui) {
getEquip($(ui.item).attr('id').slice(8));
}
});
$( ".sortable" ).draggable({
helper: "clone",
revert: "invalid"
});
$( ".sortable" ).droppable({
greedy : true,
drop: function( event, ui ) {
var msg = 'Moved ' + $(ui.draggable).text() + ', id#' + $(ui.draggable).attr('id').slice(8) + ' to';
msg += ' ' + $(this).attr('id'); //<<== gives wrong id if list above is long
msg += ' ' + $('#' + $(ui.draggable).attr('id')).parent().attr('id');
writeFooter(msg);//Moved hydrant wrenches, id#164 to sortable16 sortable22
},
});
Found a workaround. If I initialize the droppable divs from the bottom up by id, i.e. in reverse order, the problem goes away. Previously I was initializing them by class. The revised code snippet looks like this, where subloc[i-1][0] is the sublocation id#:
for (var i = subloc.length; i > 0; i--) { //init droppables backwards to overcome overflow bug
$( "#sortable" + subloc[i-1][0]).droppable({
tolerance : 'intersect',
drop: function( event, ui ) {...
精彩评论