javascript - 如何使 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 添加到 border 元素的 CSS。这将使它不可定位，所有点击/拖动/触摸事件都将通过它。