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

我只能垂直拖动它。

那是因为div元素是一个块级元素，其父元素的宽度为100%。由于#map元素的宽度与#parent元素的宽度相同，因此无法垂直拖动。

如何在边界内自由拖动？

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

更新示例：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jQuery在边界内拖动图像

1 个答案: