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