Search code examples
jquerydraggableimagemaskimage-clipping

JQuery Draggable - constrain to parent, but allow sliding under parent?

I'm using the JQuery Draggable plugin. I'm trying to create an Image Editing control where the user can move (and eventually resize) the draggable image. If you look at the demo here, you'll see that you can drag the grey box around and if it goes outside the bounds of the frame, you'll see the scroll bars appear and you can keep dragging. I'd like to achieve that same functionality without the scrollbars. You should be able to drag the image around and if the Image goes outside the bounds of the frame, it should appear to slide under the frame. The frame shouldn't get bigger, or have scrollbars appear. I would think this should be possible, but I haven't found a way to do so with the documentation I found. Here is my code:

<head>
<meta charset="UTF-8" />
<title></title>
    <style type="text/css">
        #draggable { width: 400px; height: 300px; cursor:pointer;}
        #container{overflow:hidden; height: 500px; width: 500px; border: solid 1px black;}
        #slider{margin: 10px; border: solid 1px black; height: 300px; vertical-align:middle;}
    </style>

      <%--came from http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js--%>
    <script src="scripts/jquery.js" type="text/javascript"></script>

    <%--came from //ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js--%>
    <script src="scripts/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">
          $(document).ready(function() {
              $("#draggable").draggable({ opacity: 0.35 }); //, helper: 'original', containment: 'parent'
          });
    </script>
</head>

<body>
    <div id="container">
        <img  id="draggable" src="images/96.jpg" width="400px" height="300px" alt="Click this image to drag it around" />
    </div>
</body>

Question: How can I make the draggable <img> appear to slide under the parent <div> while dragging - but without scrollbars appearing?

UPDATE: The more I think about this the more I think I should re-word my question. What I'm really wanting to do is make my parent <div> tag like a mask/clipping path around my draggable <img>. The image inside could actually be larger than the <div> but only what's in the <div> will be visible. You should be able to drag the <img> around inside the <div> as you please.

Solution

  • @bOkeifus is right. Check out this working jsFiddle demo:

    JS:

    $(document).ready(function() {
    $("#draggable").draggable({ opacity: 0.35 });
});

    HTML:

    <div id="container">
    <img id="draggable" 
         alt="Click this image to drag it around"             
         src="http://gallery.photo.net/photo/12355172-md.jpg" 
         width="400px"
         height="300px" />
</div>

    CSS:

    #container { 
    overflow: hidden; 
    height: 500px; 
    width: 500px; 
    border: solid 1px black;
}