connectToSortable - getting dropped element
Hi,
I'm using the latest UI 1.5b2 and attempting to update my original
drag element onto sortable code.
Now so far it's working a lot better using connectToSortable, but I
have come across a problem which I can't seem to work out. I need to
be able to update the ID of the dropped element. So I need the element
reference that has just been dropped into the sortable list.
Does anyone know how to do this?
var updateUpDown = function(sortable) {
$('dl:not(.ui-sortable-helper)', sortable)
.removeClass('first').removeClass('last')
.find('.up, .down').removeClass('disabled').end()
.filter(':first').addClass('first').find('.up').addClass('disabled').end().end()
.filter(':last').addClass('last').find('.down').addClass('disabled').end().end();
};
var moveUpDown = function() {
var link = $(this),
dl = link.parents('dl'),
prev = dl.prev('dl'),
next = dl.next('dl');
if(link.is('.up') && prev.length > 0)
dl.insertBefore(prev);
if(link.is('.down') && next.length > 0)
dl.insertAfter(next);
updateUpDown(dl.parent());
};
var sortableUpdate = function(e, ui) {
updateUpDown(ui.element[0]);
if(ui.sender)
updateUpDown(ui.sender[0]);
};
var removeItem = function() {
var link = $(this),
dl = link.parents('dl');
dl.remove();
$("#pageitems > dl[id='p_" + dl.attr('id').substr(2) + "']").show();
updateUpDown(dl.parent());
};
$(document).ready(function() {
$('dl', '#sortlist').prepend(' <span class="options"><a
class="up"><span>up</span></a> <a class="down"><span>down</span></a>
<a class="remove"><span>remove</span></a></span>');
$('dd', '#pageitems').hide();
$('a.up, a.down').bind('click', moveUpDown);
$('a.remove').bind('click', removeItem);
$('#sortlist').each(function(){
updateUpDown(this);
});
//First, we initialize the sortable
$('#sortlist').sortable({
items: '> dl',
handle: 'dt',
cursor: 'move',
dropOnEmpty: true,
placeholder: 'placeholder',
revert: true,
update: sortableUpdate
});
//Now we initialize the draggables in the List Group
$('.draggable').draggable({
helper: 'clone',
connectToSortable: '#sortlist',
toSortable: function() {
$(this).hide();
},
fromSortable: function() {
$(this).show();
},
stop: function(e, ui) {
$('dd', '#sortlist').show();
}
});
});