Question

我有一个具有较高z索引的可拖动元素和一个不可拖动元素。如果我将可拖动对象拖动到不可拖动对象上，它就会消失在它后面，这很好。

但是现在我希望即使在其他元素后面也可以拖动该元素。但这是行不通的，当可拖动对象位于不可拖动对象的后面时，它会卡在那里。

$('#draggable').draggable({stack: 'span'});

#draggable {
  color: white;
  background-color: black;
  z-index: 50;
 }
 
 #element
 {
  width: 100px;
  height: 100px;
  background-color: rgb(0, 0, 255, 0.5);
  z-index: 100;
  position: absolute;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<span id="draggable">Drag Me</span>
<div id="element"></div>

有什么办法可以做到这一点？

Answer 1

将CSS属性pointer-events: none;添加到不可拖动的对象会导致所有事件处理程序不会触发对象本身，而是触发后面的对象。

$('#draggable').draggable({stack: 'span'});

#draggable {
  color: white;
  background-color: black;
  z-index: 50;
 }
 
 #element
 {
  width: 100px;
  height: 100px;
  background-color: rgb(0, 0, 255, 0.5);
  z-index: 100;
  position: absolute;
  pointer-events: none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<span id="draggable">Drag Me</span>
<div id="element"></div>

将可拖动元素移到元素后面

1 个答案: