是否有实现“后台拖动”的库或方法？

Question

我想利用Google地图的功能来创建背景。所以这是想法：

我还没有找到任何库，但是我想它可以通过CSS网格解决。您能为我提供一些建议还是说理论上可以解决的问题？

Answer 1

您可以使用jQuery draggable。您可以做的是将div设置为隐藏的容器overflow，并在其中包含可拖动的图像（您的背景）：

 $("#draggable img").draggable();

#div1 {
  height: 400px;
  width: 400px;
  background-color: blue;
  overflow: hidden;
}

.image {
  margin-top: -400px;
  margin-left: -400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div1"> 
  <span class="move" id="draggable">
    <img src="https://placekitten.com/1600/1600" class="image"/>
  </span>
</div>

如果代码段在这里不起作用，请使用jsfiddle中的相同代码。