Jquery перетаскиваемый Z-индекс с относительным контейнером или фиксированной панелью

ProgramBox

Jquery перетаскиваемый Z-индекс с относительным контейнером или фиксированной панелью

Post author:admin
Запись опубликована:5 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #css #draggable #droppable

#javascript #jquery #css #перетаскиваемый #с возможностью удаления

Вопрос:

У меня возникла проблема с Jquery Перетаскиваемый, когда элемент перетаскивания находится за боковой панелью с фиксированным положением.

Родительский перетаскиваемый контейнер #gallery должен иметь относительное расположение, потому что я использую Muuri для макета сетки.

   #gallery { position: relative; width: 65%; z-index:1 }

Боковая панель имеет фиксированное положение, так что она может действовать как выдвижная панель. Если я помещаю z-индекс на боковую панель, он отображается над контейнером, как и должен, но элемент перетаскивания всегда появляется за ним вместо того, чтобы учитывать более высокий z-индекс элемента перетаскивания пользовательского интерфейса. Если я удаляю z-индекс на боковой панели, то боковая панель, очевидно, находится за контейнером, когда она должна быть сверху.

 #trash { position: fixed; z-index: 2; width: 200px; }

Я установил z-индекс элемента перетаскивания в CSS.

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

Я попытался прикрепить клон к документу и установить zIndex:

 $( "li", $gallery ).draggable({
      cancel: "a.ui-icon", 
      revert: "invalid", 
      containment: "document",
      helper: "clone",
      cursor: "move",
      zIndex: 5
    });

Контейнер #gallery должен быть относительным и иметь z-индекс 1
Боковая панель #trash имеет фиксированное положение и z-индекс 2
Элемент перетаскивания должен иметь самый высокий z-индекс: 3

Я использую один из стандартных удаляемых примеров, чтобы упростить пример. Я удалил Muuri из примера, чтобы исключить это.

Пример:https://plnkr.co/edit/0SZ5Mjanh6sowC2uVnjS

Ответ №1:

Это легко решить, обновите только одну строку кода. пожалуйста, обновите свой код, добавьте новую строку CSS

 #gallery,
#trash  { z-index: inherit !important; }

Смотрите демонстрацию:https://plnkr.co/edit/Y3SwKJj0RZswlVKOnVhW?p=preview

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

2. На самом деле есть две проблемы. Шаги для воспроизведения проблем: 1) Сверните окно, чтобы #мусор закончился # галерея. 2) Просто наведите курсор мыши на #trash. Галерея отображается над корзиной. Для заикания 2) Перетащите элемент в корзину, но не отпускайте. 3) Удерживая левую кнопку мыши нажатой, перемещайте курсор с элементом перетаскивания вверх и вниз по области перекрытия. Корзина и галерея перемещают z-индекс взад и вперед. Протестировано в последней версии FF и Chrome.

3. пожалуйста, просмотрите еще раз мой ответ

4. Да, изменение на наследование заставило его работать без заикания. Спасибо

Ответ №2:

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

     // Let the gallery items be draggable
    $( "li", $gallery ).draggable({
      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: "move",
      zIndex: 5,
      drag:function () {
        $(this).parent().css('z-index', '9999');
        $(this).removeClass('droped');
      },
      // removing the CSS classes once dragging is over.
      stop:function () {
        $(this).parent().css('z-index', '1');
        $(this).addClass('droped');
      },
    });

1. Я понимаю, что вы имеете в виду, однако это не работает, потому что это накладывает весь #gallery поверх боковой панели. Боковая панель всегда должна быть над галереей.

2. Понятно, я знал это, но я думал, что это не проблема: p

3. Есть ли способ прикрепить клон к другому родительскому элементу? Я думал, что это то, что делает свойство ‘containment’ — назначить клон корневому документу.

4. Это был бы путь, но я думаю, что вы уже решили свою проблему

Ответ №3:

изменено z-index из #trash на -1

 #trash {
    width: 200px;
    min-height: 18em;
    padding: 1%;
    position: fixed;
    background: #e4e4e4;
    right: 0;
    top: 0;
    z-index: -1;
}