jQuery draggable - Drag small image inside parent

Question

I have an image (small circle) that I want to drag on top of another bigger image (an axis). How do I set the bigger image as the parent to contain the circle?

Below is what I tried, but the circle cannot be dragged on top of the entire big image, it only drags vertically.

Code:

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

cch · Accepted Answer · 2015-02-24T04:33:30.417

1

Remove position: relative; from the #draggable.

Here are few changes I did to your code:

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' });
});

See an example here.

edited Feb 24 '15 at 04:33

answered Feb 24 '15 at 03:30

cch

3,336
8
33
61

Thank you so much! I've been working on this for hours! One more quick question: How do I get the circle to start at the very center of the graph? – ItM Feb 24 '15 at 04:00
you have to define the position @ItM – Drixson Oseña Feb 24 '15 at 04:02
That works when the graph and circle start at the top left corner of the page. But I am actually including this graph towards the middle of the page, and when I do the "left" and "right", the circle starts at the very top of the page (even though the graph is in the middle). – ItM Feb 24 '15 at 04:16
1

Oh, I think I fixed it. The problem was that this graph is being included as part of a site with many paragraphs. The graph is towards the middle of the site. When I define the "left" and "right" for the circle, the circle starts at the defined position in the very left corner of the entire site, not with reference to its containment. One way I tried that seems to work is to do something like: left: 500px and right:1500px so the circle starts towards the middle of the page where the graph is. Thank you again! – ItM Feb 24 '15 at 04:23

jQuery draggable - Drag small image inside parent

1 Answers1