logo标签列表

一个带滚动条的div出现在z-index更高的div上。

javascriptjquerycssjquery-ui
4

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

侧边栏的 z-index 更高。容器 .main 的 overflow:none，其中的 div 的 overflow:scroll，但是由于某种原因，当您拖动文本时，它会认为它在 .scrolling 上方，而实际上在 sidebar 的 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>

修复了你的 JSFiddle：https://jsfiddle.net/Twisty/3gn57quj/。打开 https://jsfiddle.net/Twisty/3gn57quj//show 进行移动设备测试。 - Twisty
谢谢，问题仍然存在。 - Mike
4个回答
2
我注意到的第一件事是您的“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',
  });
});
1
这是一个自ECMAScript 2015开始使用的函数简写，将函数分配给方法名称，使控制台没有显示任何错误消息。 - Rach Chen
如果是简写的话，那么它会是 helper: () => {} 吗？ - Twisty
0

它并不认为它已经结束了 .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
关于 z-index 问题，我相信您可以选择：

  • 在您的CSS中设置：

     .scrolling {
   background-color: transparent;
 }

    并使用scroll-container的background-color

  • 或者只需稍微提高draggable的z-index（首选解决方案）：

     .drag {
   z-index: 10;
 }

  • 或者在您的辅助函数中设置内联样式：

     return $('<div style="z-index: 10;">', {
最后，我相信您甚至不需要太多地提高“侧边栏”的z-index，您可以安静地避免这种情况。
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中，您的代码片段可以正常工作，但在其他一些浏览器中进行简短测试会出现以下错误：

预期结果：':'

0

我猜你想限制侧边栏之间的拖动。

为此，您需要在 draggable 函数中提供 containment 选项。这将阻止拖动的移动。

<!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接