jquery-ui，可拖动项目：当位置是绝对时不起作用

Question

我正在尝试使 position:absolute DIV 中包含可拖动的项目。当拖动到代码前面声明的 div 上时效果很好，但是这个项目永远不会出现在代码后面声明的 [position:absolute] div 上，即使设置较低的 Z-对此 DIV...

的索引

这是一个例子

$(function(){
   $(".myClass").draggable({stack:".bg"});
  }(jQuery));

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div style="position:absolute;background-color:#3FF;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index:10;">
 <div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#FFC;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index:10;">
 <div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#9CF;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-index:10;"></div>

知道如何解决这个问题吗？

谢谢。

Answer 1

问题出在您的 z-index 父元素上。解决问题的一种简单方法是简单地删除它们。或者您可以在 start 和 stop 上操作它们，这样可拖动的父级始终位于顶部。请参阅此处的开始和停止操作，但将其从 HTML 中删除也应该有效。

$(function() {
  $(".myClass").draggable({
    stack: ".myClass",
    start: function(e, ui) {
      ui.helper.parent().css('z-index', 30);
    },
    stop: function(e, ui){
      ui.helper.parent().css('z-index', 10);
      }
  });
}(jQuery));

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div style="position:absolute;background-color:#3FF;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index: 10;">
  <div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#FFC;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index: 10;">
  <div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#9CF;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-indx: 10;"></div>

jquery-ui，可拖动项目：当位置是绝对时不起作用

jquery-ui, draggable item : does'nt work when position is absolute

html

jquery-ui

z-index

draggable

absolute