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

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 元素。它将使其无法定位，并且所有单击/拖动/触摸事件都将通过它。