时间戳

首页 > 解决方案 > 如何使 div 可以与其他 div 一起拖动

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

问题描述

我有两个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();
});

我希望能够拖动背景图像而不必隐藏边框。有没有办法做到这一点？

标签： javascriptjquerypositioningdisplay

解决方案

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

推荐阅读