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

【问题标题】：jquery-ui, draggable item : does'nt work when position is absolutejquery-ui，可拖动项目：当位置为绝对时不起作用
【发布时间】：2015-09-26 09:52:21
【问题描述】：

我正在尝试将可拖动项目包含在位置：绝对 DIV 中。当拖动到代码中前面声明的 div 上时效果很好，但该项目永远不会出现在代码后面声明的 [position:absolute] div 上，即使设置较低的 Z-index 到此 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>

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

谢谢。

【问题讨论】：

标签： html jquery-ui z-index draggable absolute

【解决方案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>

【讨论】：