Question

我有一个图像（小圆圈），我想在另一个更大的图像（轴）上拖动。如何将较大的图像设置为包含圆的父图像？

下面是我尝试的内容，但是圆圈无法拖动到整个大图像的顶部，只能垂直拖动。

代码：

          $(function() {
            $("#draggable").draggable({
              containment: "#container",
              scroll: false
            });
          });

          #draggable {
            position: relative;
            left: 20px;
          }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>


<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Drag a dot</title>

</head>

<body>
  <div id="container">
    <img src="https://ka-perseus-graphie.s3.amazonaws.com/ed9ce4eb0526f1c335eaea9b3a1920232455ec57.png" style="width:304px;height:228px">
    <div id="draggable">
      <img src="http://www.cmjc.ca/images/ferme.png" style="width:15px;height:15px">
    </div>
  </div>
</body>

</html>

Answer 1

从position: relative;删除#draggable。

以下是我对您的代码所做的一些更改：

<强> HTML

<body>
  <div id="container">
    <div id="draggable" >
      <img src="http://www.cmjc.ca/images/ferme.png">
    </div>
  </div>
</body>

CSS

#draggable { 
  position: absolute;
  left: 142px; 
  top: 160px;
}

#container {
  background: url('https://ka-perseus-graphie.s3.amazonaws.com/ed9ce4eb0526f1c335eaea9b3a1920232455ec57.png'); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 304px; 
  height: 228px; 
  border: 1px solid black;
}

JS

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

查看 example here 。

jQuery draggable - 在父级内拖动小图像

1 个答案: