在元素后面移动可拖动元素

Question

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

但现在我希望仍然能够拖动该元素，即使它位于另一个元素的后面。但这不起作用，当可拖动对象位于不可拖动对象的后面时，它会卡在那里。

$('#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>

在元素后面移动可拖动元素

move draggable behind element

javascript

jquery-ui-draggable