Прокрутка div внутри div появляется над div с более высоким z-индексом - PullRequest
Новая
       7

Прокрутка div внутри div появляется над div с более высоким z-индексом

4 голосов
/ 07 февраля 2020

https://jsfiddle.net/09rcqwdf/1/

Боковая панель имеет более высокий z-index. Контейнер .main имеет overflow: none, div, внутри него есть overflow: scroll, но по какой-то причине, когда вы перетаскиваете текст, он думает, что он над .scrolling div, хотя на самом деле это более боковая панель div. 

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#fafafa">
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    #content {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }
    
    .main {
      position: absolute;
      bottom: 0;
      left: 300px;
      right: 0;
      top: 0;
      overflow: hidden;
    }
    
    .scroll-container {
      display: block;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      overflow: scroll;
      z-index: 1;
    }
    
    .scrolling {
      display: block;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 3500px;
      height: 4000px
    }
    
    .sidebar {
      display: block;
      position: absolute;
      background-color: #5555;
      overflow: hidden;
      z-index: 100000;
      width: 300px;
      bottom: 0;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div id="content">
    <div class="main">
      <div class="scroll-container">
        <div class="scrolling">

        </div>
      </div>
    </div>
    <div class="sidebar">
      <div>
        <div class="drag">Drag</div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
  </script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $('.scrolling').droppable({
      tolerance: 'pointer',
      accept: '.drag',
      drop(event, ui) {
        console.log(event);
        console.log(ui);
        if (ui.helper.hasClass('cancelled')) {
          return;
        }
      },
    });
    $('.drag').draggable({
      helper() {
        const $helper = $('<div></div>');
        $helper.text('drag');
        return $helper.clone().addClass('dragged-component-helper');
      },
      start() {},
      stop(event, ui) {
        ui.helper[0].remove();
      },
      cursorAt: {
        left: 0,
        top: 5,
      },
      cancelOnEscape: true,
      appendTo: '#content',
      disabled: false,
      distance: 0,
      revert: 'invalid',
    });
  </script>
</body>

</html>

Ответы [ 4 ]

2 голосов
/ 07 февраля 2020

Первое, что я заметил, это то, что ваш helper обратный вызов был настроен неправильно, у вас было: 

$('.drag').draggable({
  helper() {
    const $helper = $('<div></div>');
    $helper.text('drag');
    return $helper.clone().addClass('dragged-component-helper');
  },
  start() {
  },

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

$('.drag').draggable({
  helper: function() {
    const $helper = $('<div></div>');
    $helper.text('drag');
    return $helper.clone().addClass('dragged-component-helper');
  },
  start: () => {
  },

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

Что касается действия перетаскивания, Я думаю, что это также будет исправлено исправлением.

https://jsfiddle.net/Twisty/3gn57quj/10/

JavaScript

$(function() {
  $('.scrolling').droppable({
    tolerance: 'pointer',
    accept: '.drag',
    drop(event, ui) {
      if (ui.helper.hasClass('cancelled')) {
        return false;
      }
      $(this).append(ui.helper.clone().css({
        left: (ui.offset.left - $(".sidebar").width()) + "px",
        top: ui.offset.top + "px"
      }));
    },
  });
  $('.drag').draggable({
    helper: function() {
      return $("<div>", {
        class: "drag component"
      }).html("drag");
    },
    stop(event, ui) {
      ui.helper[0].remove();
    },
    cursorAt: {
      left: 0,
      top: 5,
    },
    cancelOnEscape: true,
    appendTo: '#content',
    disabled: false,
    distance: 0,
    revert: 'invalid',
  });
});
0 голосов
/ 17 февраля 2020

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

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

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#fafafa">
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #content {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .main {
      position: absolute;
      bottom: 0;
      left: 300px;
      right: 0;
      top: 0;
      overflow: hidden;
    }

    .scroll-container {
      display: block;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      overflow: scroll;
      z-index: 1;
    }

    .scrolling {
      display: block;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 3500px;
      height: 4000px
    }

    .sidebar {
      display: block;
      position: absolute;
      background-color: #5555;
      overflow: hidden;
      z-index: 100000;
      width: 300px;
      bottom: 0;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div id="content">
    <div class="main">
      <div class="scroll-container">
        <div class="scrolling">

        </div>
      </div>
    </div>
    <div class="sidebar">
      <div>
        <div class="drag">Drag</div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
  </script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $('.scrolling').droppable({
      tolerance: 'pointer',
      accept: '.drag',
      drop(event, ui) {
        console.log(event);
        console.log(ui);
        if (ui.helper.hasClass('cancelled')) {
          return;
        }
      },
    });
    $('.drag').draggable({
    containment: ".sidebar",
      helper() {
        const $helper = $('<div></div>');
        $helper.text('drag');
        return $helper.clone().addClass('dragged-component-helper');
      },
      start() {},
      stop(event, ui) {
        ui.helper[0].remove();
      },
      cursorAt: {
        left: 0,
        top: 5,
      },
      cancelOnEscape: true,
      appendTo: '#content',
      disabled: false,
      distance: 0,
      revert: 'invalid',
    });
  </script>
</body>
</html>
0 голосов
/ 16 февраля 2020

Это , а не думаю, что все кончено .scrolling div. Это просто, что .scrolling div прозрачен, и вы можете видеть сквозь него. Чтобы увидеть, что я говорю, добавьте цвет фона к вашему .scrolling div, который не позволит вам увидеть, что происходит за ним. 

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#fafafa">
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #content {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .main {
      position: absolute;
      bottom: 0;
      left: 300px;
      right: 0;
      top: 0;
      overflow: hidden;
    }

    .scroll-container {
      display: block;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      overflow: scroll;
      z-index: 1;
    }

    .scrolling {
      display: block;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 3500px;
      height: 4000px;
      background: orange; <!-- Background Color to prevent transparency -->
    }

    .sidebar {
      display: block;
      position: absolute;
      background-color: #5555;
      overflow: hidden;
      z-index: 100000;
      width: 300px;
      bottom: 0;
      top: 0;
      left: 0;
    }

  </style>
</head>

<body>
  <div id="content">
    <div class="main">
      <div class="scroll-container">
        <div class="scrolling">

        </div>
      </div>
    </div>
    <div class="sidebar">
      <div>
        <div class="drag">Drag</div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')

  </script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $('.scrolling').droppable({
      tolerance: 'pointer',
      accept: '.drag',
      drop(event, ui) {
        console.log(event);
        console.log(ui);
        if (ui.helper.hasClass('cancelled')) {
          return;
        }
      },
    });
    $('.drag').draggable({
      helper() {
        const $helper = $('<div></div>');
        $helper.text('drag');
        return $helper.clone().addClass('dragged-component-helper');
      },
      start() {},
      stop(event, ui) {
        ui.helper[0].remove();
      },
      cursorAt: {
        left: 0,
        top: 5,
      },
      cancelOnEscape: true,
      appendTo: '#content',
      disabled: false,
      distance: 0,
      revert: 'invalid',
    });

  </script>
</body>

</html>
0 голосов
/ 12 февраля 2020

Что касается вопроса z-index, я полагаю, вы можете либо

  • установить в свой CSS: 

     .scrolling {
   background-color: transparent;
 }

    и использовать background-color из scroll-container

  • или просто немного поднять z-index из draggable (предпочтительное решение): 

     .drag {
   z-index: 10;
 }

  • или, может быть, установить встроенный стиль в вашей вспомогательной функции: 

     return $('<div style="z-index: 10;">', {

Наконец, я считаю, что вам даже не нужно повышать z-index из sidebar , Вы можете спокойно избегать этого 

z-index: 100000

Я твердо верю, Вам также может потребоваться изменить: ui.helper[0].remove(); на: ui.helper.remove();

В качестве бонуса, чтобы правильно расположите draggable Я считаю, что самое простое решение - получить позицию прокрутки ближайшего прокручиваемого контейнера : 

$(function() {
  $('.scrolling').droppable({
    tolerance: 'pointer',
    accept: '.drag',
    drop: function(event, ui) {
      if (ui.helper.hasClass('cancelled')) {
        return false;
      }
      var container = $(event.target).scrollParent();
      $(this).append(ui.helper.clone().css({
        left: (ui.offset.left + container.scrollLeft()- $(".sidebar").width()) + "px",
        top: (ui.offset.top + container.scrollTop()) + "px"
      }));
    }
  });
  $('.drag').draggable({
    helper: function() {
      return $("<div>", {
        class: "drag component"
      }).html("drag");
    },
    stop: function(event, ui) {
      ui.helper.remove();
    },
    cursorAt: {left: 0, top: 5},
    cancelOnEscape: true,
    appendTo: '#content',
    disabled: false,
    distance: 0,
    revert: 'invalid'
  });
});

Кроме того, обратите внимание: Замечание Twisty верно, в последних Firefox и Chrome Ваш фрагмент работает, но краткий тест в некоторых других браузерах вызывает ошибку ниже:

Ожидается: ':'

...