Перемещение div наверх по клику (виртуальный рабочий стол)

Question

У меня есть приложение, которое работает как виртуальный рабочий стол (значки в горизонтальной полосе внизу). При нажатии на значок открывается окно (создается динамически). Если вы щелкнете по другому (или тому же) значку, другое окно откроется на 10px вниз и на 10px справа от последнего и будет перемещено вверху.

Что мне нужно сделать, так это то, что если вы щелкнете по окну, которое перемещено под другим окном, окно, по которому щелкнули, переместится наверх.

Ниже приведено то, что я получил до сих пор, но это совсем не хорошее решение (например, если вы щелкнете по окну, которое уже находится сверху, функции все равно запустятся, и z-index в окне подсчитает) , Что было бы более элегантным решением для этого? Заранее спасибо!

Windows.prototype.moveOnTop = function(){

var boxes = $('.window');

    boxes.click(function() {
        var thisWindow = $(this);
        Windows.prototype.getZindex(thisWindow);
    });
}

Windows.prototype.getZindex = function(thisWindow){

    var boxes = $('.window');
    var maxZindex = 0;

    boxes.each(function() {
        var zIndex = parseInt($(this).css('z-index'), 10);
        maxZindex = Math.max(maxZindex, zIndex);
    });

    thisWindow.css("z-index", maxZindex + 1);
}

Answer 1

Более элегантное решение будет включать структуру (в основном массив), содержащую ссылки на все созданные окна. Структура будет отражать z-индекс окон, например, нижнее окно будет в allWindows[0], а верхнее окно будет в allWindows[n-1] (где n - количество окон).

Как только окно (скажем, с индексом [3]) получает фокус (нажатие), вы сначала обновляете эту структуру:

1. Переместить allWindows[n-1] (текущее верхнее окно) во временное хранилище
2. Переместить allWindows[3] на allWindows[n-1] (теперь это верхнее окно)
3. Переместить каждое окно между индексами [3] и [n-1] (исключая) на одну позицию вниз
4. Поместите окно в место временного удержания на allWindows[n-2] (одно под верхом)

Пока ничего не изменилось, изменилась только структура: теперь окна расположены в правильном порядке.

1. Перебрать allWindows[3]' to allWindows [n-1] `(включительно) и установить z-индекс, равный индексу в структуре

Таким образом, z-индекс никогда не будет больше, чем n-1. Конечно, вы делаете это только в том случае, если окно, которое получает фокус (по которому щелкают), уже не является верхним окном, чтобы не тратить впустую.

Я вижу, что вы используете jQuery. С шаблоном плагина jQuery вы можете хранить эту структуру внутри плагина, и вы сможете использовать ее в обработчиках кликов.

Answer 2

Один из способов - не давать z-index любому из ваших .window делений и использовать вместо этого позиционирование узла DOM. то есть вы перемещаете нажатый div в самое верхнее положение в DOM, то есть как последний дочерний элемент body

т.е. что-то вроде:

Windows.prototype.moveOnTop = function(){

    $('.window').click(function() {
        var thisWindow = $(this);
        if(thisWindow.next().length > 0) thisWindow.appendTo('body');
    });

};

Но вам нужно убедиться, что z-index не указано ни для одного из ваших .window делений.

Answer 3

Поскольку вы вызываете Windows.prototype.moveOnTop каждый раз, когда добавляется новое окно, обработчики click будут складываться для ранее созданных окон. Например. после создания n окон первое окно будет иметь обработчики n, второе - n-1 и так далее.

Поскольку getZindex выглядит хорошо для меня, вполне возможно, что это источник вашей проблемы. Или нет, но это то, что вы все равно хотите исправить. И исправить это легко:

$(document).on('click', '.window', function() {
    var thisWindow = $(this);
    Windows.prototype.getZindex(thisWindow);
});

Таким образом, окно еще не должно существовать при инициализации приложения. Это называется делегирование события , и это означает, что событие будет всплывать до document, который будет смотреть, соответствует ли выбранный элемент селектору ('.window'), и вызывать обработчик, если это так.

Как уже отмечал Роберт , ваши имена функций немного странные. Вы не показали нам остальную часть Windows, но она явно не связана с DOM. Исходя из этой догадки, я думаю, что это может быть более подходящим:

1. Удалить Windows.prototype.moveOnTop.

2. Переименуйте getZindex в более точное описательное имя, например ::

   Windows.prototype.moveToTop = function(thisWindow){
       var boxes = $('.window');
       var maxZindex = 0;
   
       boxes.each(function() {
           var zIndex = parseInt($(this).css('z-index'), 10);
           maxZindex = Math.max(maxZindex, zIndex);
       });
   
       thisWindow.css("z-index", maxZindex + 1);
   }
   

3. Куда бы вы ни инициализировали свое приложение, добавьте следующее:

   var container = '#appContainer'; // <-- the container the app is rendered into
   
   $(container).on('click', '.window', function() {
       var thisWindow = $(this);
       Windows.prototype.moveToTop(thisWindow);
   });
   

Дайте нам знать, если это решит вашу проблему.

Answer 4

Вы могли бы заставить некоторый класс менеджера посмотреть текущие окна и поменять местами индексы вместо того, чтобы считать.Это более элегантный способ сделать это.

В противном случае вы можете создать алгоритм, который будет содержать текущие индексы.Таким образом, вы бы перенесли одну панель наверх, а другие опустили.

Должна быть возможность найти слой по его z-индексу.Так что это не должно быть так сложно.