javascript - 使用 jQuery 在边界内拖动图像

Question

我正在尝试使用 jQuery 使图像在边界中可拖动，但我只能垂直拖动它。如何在边界内自由拖动它？

$("#map").draggable({
  containment: 'parent'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div id="parent" style="width: 800px; height: 700px">
  <div id="map" class="map">
    <img src="Images/map.PNG" style="width:500px; height:350px;">
  </div>
</div>

Answer 1

I can only drag it vertically.

这是因为 div 元素是 block 级元素，其宽度为父元素的 100%。由于#map 元素与#parent 元素具有相同的宽度，因此无法垂直拖动。

How can I freely drag it within a boundary?

如果您希望#map元素的宽度基于子img元素，只需将元素的display更改为inline-block 使其具有 "shrink-to-fit" width .

更新的示例:

$("#map").draggable({
  containment: 'parent'
});

#parent {
  width: 800px;
  height: 700px;
  border: 1px solid;
}
#map {
  display: inline-block;
}
#map img {
  width: 500px;
  height: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<div id="parent">
  <div id="map" class="map">
    <img src="//placehold.it/100">
  </div>
</div>