jquery ui multiple drops problem
I have 2 droppable divs and when a drag is dropped on either one of them, i'm trying to get the id of that drop element. It's always returning the id of the first drop element in the DOM.
$('#albumImgs li').draggable({
containment: '#content',
scrollSensitivity: 60,
revert: 'invalid',
cursor: 'move'
});
$('.dropContainerClosed').droppable({
accept: '#albumImgs li',
activeClass: 'dropContainerOpen',
drop: function(ev开发者_Go百科ent, ui) {
var file = $(ui.draggable.find('img'));
var fileName = file.attr('alt');
var albumName = $('div.dropContainerClosed').attr('id');
console.log("fileName = "+fileName);
console.log("albumName = "+albumName);//always returns the first div.dropContainerClosed id in the DOM
if(albumName != undefined) {
$.post('addImage.php', {filen: fileName, albumn: albumName},
function(data) {
//do something here
}, 'json');
} else {
$.post('firstImage.php', {filen: fileName, albumn: albumName},
function(data) {
//do something here
}, 'json');
}
}
});
You need to use ui.item.attr('id');
se my similar responce on this question!
Getting the position of the element in a list when it's drag/dropped (ui.sortable)
$(function() {
$my_droppable = $('#my_droppable');
$my_droppable.droppable({
accept: '#my_droppable > li',
activeClass: 'ui-state-highlight',
drop: function(ev, ui) {
//define your func after drop..
get_my_attr(ui.draggable);
}
});
//THIS IS IMPORTANT FOR GET THE ATTR AND OTHER STUFF
// resolve the icons behavior with event delegation
$('ul.my_droppable > li').click(function(ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-trash')) {
deleteImage($item);
} else if ($target.is('a.ui-icon-zoomin')) {
viewLargerImage($target);
} else if ($target.is('a.ui-icon-refresh')) {
recycleImage($item);
}
return false;
});
});
});
function get_my_attr($item) {
alert($item.attr('class'));
}
精彩评论