to me, it looks like the z-index calculation is only happening when
the board is set up. What if you put that zmax calculation into its
own method, say, calculateZmax(), and then from *both* the
('.dragImage').click() function as well as the drop: function you
called calculateZmax() ? Either that, or somehow you have to bind
any new "dragImage" elements to have the zmax calculation attached.
(I think someone wrote a plugin for doing that, so that any new
elements that get that class name get things bound to them, and also
lose that binding whenever they lose the class).
Sorry if I'm vague, just throwing an idea out there that might spark a
new path
On Oct 28, 12:28 pm, Mazureth <[EMAIL PROTECTED]> wrote:
> 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
