im trying to write a cork board type app for a site and im having a
little trouble with the drag and drop. basically there are 2 divs
(#picker, #board) that load on the page. the #picker div contains
various images that the user can drag and drop onto the #board div.
once an image has been dropped into the #board div i want to change it
to a draggable element so the user can arrange all the image how they
please.
i can get all of that to work. however, using firebug to see whats
happening, once i drop the image into the #board and then start to
drag it around, i notice that the top and left properties of the img
element listed above it in the div are also being affected. this
shouldnt be happening.
i also wrote some extra code to bring the image being dragged to the
'front' by setting its z-index+1 to the current highest z-index. this
works fine when i havent dropped any new images onto the #board yet.
all the images already in the #board become the top image. but the
newly dropped images dont come to the front.
here is the code right now:
$(document).ready(function() {
$(".dragImage").draggable({
containment: 'parent',
cursor: 'move'
});
$(".dropImage").draggable({helper: "clone"});
$(".vizualize_container").droppable({
accept: ".dropImage",
activeClass: "droppable-active",
hoverClass: "droppable-hover",
drop: function(e, ui) {
$(ui.draggable).attr({class: "dragImage ui-draggable"});
$(ui.draggable).draggable({
containment: 'parent',
cursor: 'move'
});
$(this).append($(ui.draggable));
}
});
});
var zmax = 0;
$('.dragImage').click(function() {
$(this).siblings('.dragImage').each(function() {
var cur = $(this).css('zIndex');
zmax = cur > zmax ? $(this).css('zIndex') : zmax;
});
$(this).css('zIndex', (zmax*1)+1);
});
and here is a link to see it in action:
http://www.tut.com/visualizer
