Question

I am implementing drag and drop, user can drag few images and drop them in a div, and I dynamically append a p tag as label to each image once user click on a button.

Currently I meet problem when I have 2 images which is very close to each other (one is on top of another). The appended p tag for the top images will be hidden by the bottom image. I tried to alert the z-index for each dropped image, and found out it is ‘auto’. I guess I need to assign a new z-index for each div, but I tried in the function which i append the label, and it dint work as expect:

 function generateLabel() {
      var current = 5000;
      $('#rightframe img').each(function () {
        var cImgName = $(this).attr('id');
        var width = $(this).width();

        // To select the respective div
        var temp = "div#" + cImgName;
        $.ajax({
            url: '/kitchen/generatelabel',
            type: 'GET',
            data: { containerImgName: cImgName },
            async: false,
            success: function (result) {
                $(temp).append(result);
                // I guess the each function loop through each div according to the time it is created, so I try to assign a decreasing z-index 
                $(temp).css('z-index', current);
                current -= 100;
                // To select the label for the image
                temp += " p";
                // Set label width based on image width
                $(temp).width(width);
            }
        });
    });

However, what I get is, bottom image which dropped later do NOT hide the label of the image above, but if the above image is dropped after than the bottom image, above image’s label is hide by the bottom image.

It’s a very specific situation and I hope I do make myself clear…

Hope can get some help here… Appreciate any feedback…

Answer 1

I am so glad that I able to work out a solution for this kinda weird problem. I get to one useful plugin, the jquery-overlaps which check 2 dom whether they are overlapped with each other or not. Then i assign a z-index to the label accordingly.

Just to show my solution here, in case anyone jump into this bottleneck 🙂

 // To assign an increasing z-index to the label
        var count = 100;
        $('#rightdiv p').each(function () {
            // If any label overlaps with the image (used overlaps plugin)
            if ($(this).overlaps($('#rightdiv img'))) {
                // Increase count (the z-index)
                count += 10;
                // Set the parent div z-index 1st, if not the label z-index do not have effect
                $(this).parent().css('z-index', count);
                $(this).css('z-index', count);
            }

        });

Thanks! 😀