Установка z-index для перетаскиваемых элементов - PullRequest
Новая
       31

Установка z-index для перетаскиваемых элементов

33 голосов
/ 07 марта 2011

Я пытаюсь установить z-index для перетаскиваемых элементов, используя jQuery.Вы можете видеть то, о чем я говорю и что у меня есть до сих пор:

http://jsfiddle.net/sushik/LQ4JT/1/

Это очень примитивно, и с этим есть проблемы.Любые идеи о том, как сделать так, чтобы последний нажатый элемент имел самый высокий z-индекс, и вместо того, чтобы сбрасывать все остальные до базового z-index, сделайте так, чтобы они пошаговые, так что от 2-го до последнего нажатого элемента будет второй самый высокий z-indexи т. д.

Другая проблема, с которой я столкнулся, заключается в том, что она работает только для события полного щелчка, но перетаскиваемая функциональность работает, нажимая и удерживая нажатой клавишу.Как я мог применить класс к тому начальному щелчку вниз и не ждать, когда произойдет отпускание щелчка?

Ответы [ 5 ]

56 голосов
/ 07 марта 2011

Все, что вам нужно сделать, это использовать draggable({stack: "div"}) Теперь, когда вы перетаскиваете div, он автоматически достигнет вершины.

Проверьте рабочий пример на http://jsfiddle.net/LQ4JT/8/

27 голосов
/ 07 марта 2011

Я обновил ваш CSS и Javascript. Не используйте «! Важное» в css, если вы не настолько отчаянны.

http://jsfiddle.net/LQ4JT/7/

    $(document).ready(function() {
        var a = 3;
        $('#box1,#box2,#box3,#box4').draggable({
            start: function(event, ui) { $(this).css("z-index", a++); }
        });
    $('#dragZone div').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

});

Хотя этот ответ работает, он имеет ограничение максимального числа 2 ^ 31−1 в javascript. см. Какое наибольшее целочисленное значение в JavaScript может быть использовано числом без потери точности? для получения дополнительной информации.

7 голосов
/ 19 февраля 2015

Следующий код будет соответствовать вашим требованиям.Вам нужно stack ваш divs вместо установки z-indexes, а во-вторых, вам нужно показать div сверху, просто щелкнув по нему, не перетаскивая его.

Так что для суммирования вам нужно stack: "div", а для отображения элемента div сверху просто щелкните, вам нужно использовать distance: 0.

. По умолчанию это значение distance: 10, котороеозначает, что пока вы не перетащите его 10 pixels, он не будет отображаться наверху.Если установить значение distance: 0, оно будет отображаться вверху после простого щелчка.

Попробуйте следующий код. 

$('#box1,#box2,#box3,#box4').draggable({
    stack: "div",
    distance: 0
});

Working JSFiddle Here.

Редактировать:

Нажмите кнопку Фрагмент кода запуска ниже, чтобы выполнить этот фрагмент встроенного кода. 

$(document).ready(function() {

  $('#box1,#box2,#box3,#box4').draggable({
    stack: "div",
    distance: 0
  });

  $('#dragZone div').click(function() {
    $(this).addClass('top').removeClass('bottom');
    $(this).siblings().removeClass('top').addClass('bottom');

  });
});
#box1 {
  width: 150px;
  height: 150px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0
}

#box2 {
  width: 150px;
  height: 150px;
  background-color: green;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 0
}

#box3 {
  width: 150px;
  height: 150px;
  background-color: yellow;
  position: absolute;
  top: 50px;
  left: 100px;
  z-index: 0
}

#box4 {
  width: 150px;
  height: 150px;
  background-color: blue;
  position: absolute;
  top: 70px;
  left: 200px;
  z-index: 0
}

.top {
  z-index: 100!important;
  position: relative
}

.bottom {
  z-index: 10!important;
  position: relative
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="dragZone">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>
5 голосов
/ 10 августа 2014

Я нашел самый простой способ решения этой проблемы - использовать параметры appendTo и zIndex. 

$('#box1,#box2,#box3,#box4').draggable({
  appendTo: "body",
  zIndex: 10000
});
0 голосов
/ 05 апреля 2013

Вот очень упрощенная версия ответа Махеша: 

$(document).ready(function() {
  var a = 1;
  $('#box1,#box2,#box3,#box4,#box5,#box6,#box7').draggable({
    start: function(event, ui) { $(this).css("z-index", a++); }
  });
});

http://jsfiddle.net/LQ4JT/713/

Кажется, все еще работает хорошо, если я что-то упустил.

...