Установите z-index на динамически генерируемую метку изображения, чтобы предотвратить перекрытие метки, скрытой от изображения - PullRequest
Новая
       25

Установите z-index на динамически генерируемую метку изображения, чтобы предотвратить перекрытие метки, скрытой от изображения

1 голос
/ 11 ноября 2011

Я использую перетаскивание, пользователь может перетаскивать несколько изображений и помещать их в div, и я динамически добавляю тег ap в качестве метки к каждому изображению, когда пользователь нажимает кнопку.

В настоящее время я сталкиваюсь с проблемой, когда у меня есть 2 изображения, которые находятся очень близко друг к другу (одно поверх другого).Добавленный тег p для верхних изображений будет скрыт нижним изображением.Я попытался предупредить z-index для каждого упавшего изображения и обнаружил, что это «auto».Я предполагаю, что мне нужно назначить новый z-индекс для каждого div, но я попытался в функции, к которой я добавляю метку, и она работает не так, как ожидалось: 

 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);
            }
        });
    });

Однако, что я получаю,нижнее изображение, которое было удалено позже, НЕ скрывает метку изображения выше, но если вышеупомянутое изображение сбрасывается после нижнего изображения, над меткой изображения скрывается нижнее изображение.

Это очень специфическая ситуация иЯ надеюсь, что я проясняю себя ...

Надеюсь, что вы можете получить некоторую помощь здесь ... Ценю любые отзывы ...

1 Ответ

0 голосов
/ 12 ноября 2011

Я так рад, что смог найти решение этой странной проблемы.Я получаю один полезный плагин, jquery-перекрытия, которые проверяют 2 dom, перекрываются ли они друг с другом или нет.Затем я назначаю z-index метке соответствующим образом.

Просто, чтобы показать мое решение здесь, на случай, если кто-нибудь прыгнет в это узкое место:) 

 // 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);
            }

        });

Спасибо!: D

...