Question

我彼此之间有两个div。一种是显示边框，另一种是显示图像。我正在使用jquery .draggable();方法使div下面的元素可拖动。问题是我无法将div移到下面。如果在display:none;上，则可拖动方法可以正常工作。这是因为在它上面有一个div。

HTML：

<div id="editor-holder">
   <div id="border-holder"><img src="img/border.png"></div>
   <div id="image-holder"><img src="background-image.jpg"></div>
</div>

CSS：

#editor-holder{
  width:400px;
  height:300px;
  position:relative;
  overflow:hidden;
}

#border-holder{
  position:absolute;
}
#border-holder img{
  width:100%;
}

#image-holder{
  position:absolute;
}
#image-holder img{
  width:100%;
}

Javascript：

$( function() {
   $( "#image-holder" ).draggable();
});

我希望能够在不隐藏边框的情况下拖动背景图像。有什么办法吗？

Answer 1

将pointer-events: none添加到CSS的border元素。它将使其无法定位，并且所有单击/拖动/触摸事件都将通过它。

如何使div与其他div一起拖动

1 个答案: