Stacked elements in JQuery UI.
Hi,
because JQuery doesn't have option to restrict events to the first
elements on the stack i needed to do a little trick.
var aWantToBeAssigned = []; //array that contain temporary
droppable targets
//Accept all droppableToolbarObject
var oDTO =
{
accept: ".droppableToolbarObject",
greedy: true,
drop: function(ev, ui)
{
aWantToBeAssigned.push($(this));
}
}
//Paint bucket is an element that color others elements
$("#paintBucket").draggable
({
zIndex: 999,
helper: "clone",
cursorAt:
{
top: 22,
left: 8
},
start: function(ev, ui)
{
aWantToBeAssigned = [];
},
stop: function(ev, ui)
{
var length = aWantToBeAssigned.length;
if (length != 0)
{
aWantToBeAssigned[aWantToBeAssigned.length-1].css
("backgroundColor", $("#innerColorPicker").css("backgroundColor"));
}
}
});
//User zone is the mega container for the page of the user.
$("#userZone").droppable(oDTO);
So if multiple elements that accept a .droppableToolbarObject catch
the drop only the last one (The last in the DOM, regardeless of z-
index for the moment) will be affected by the drop.
But now this trick doesn't work anymore in the situation of a
dblclick... Anyone have an idea?