Установка z-index в перетаскиваемых событиях start и stop

Question

Я хочу исправить эту проблему с помощью z-индекса перетаскиваемого элемента div.Я установил z-index около 99999. Но это вызывает проблемы для других элементов на странице.Вместо того, чтобы иметь фиксированный z-индекс, мне пришло в голову, что лучшим способом может быть установка z-index в перетаскиваемом запуске и остановке.

У меня есть этот код, чтобы сделать это.

$('#id').draggable({ 
    start: function(event, ui) { 
           var $item = ui.draggable;
           $item.css("z-index","999999");
            },
    stop: function(event, ui) {  
           var $item = ui.draggable;
           $item.css("z-index","");
           } 
});

Это должно установить z-индекс, когда перетаскивание начинается, а затем установить его в пустую строку, когда перетаскивание прекращается.Но это не делает этого.Что может быть не так?

Кто-то предложил использовать z-index для класса ui-draggable-dragging, но это также не решило проблему.

.ui-draggable-dragging {
    z-index:9999;
}

Применяется ли этот класс кэлемент автоматически, должен ли он быть добавлен в код?

Answer 1

Проблема, которую я пытался решить, заключается в том, что перетаскиваемые объекты не выходили за пределы контейнера.Это произошло потому, что было указано переполнение overflow: скрыто.Если я удаляю это, код работает.

Answer 2

Не устанавливайте пустую строку. Вместо этого установите auto.

$(function(){           // Just to make sure we're clear, this must be here.
  $('#id').draggable({ 
    start: function(event, ui) { 
      $(this).css("z-index","999999");
    }, 
    stop: function(event, ui) {  
      $(this).css("z-index","auto");
    } 
  });
});

Это должно, при условии, что все остальное правильно, вернуть его к своему естественному z-index