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

Question

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.

For what it's worth, I've tried changing the `z-index` on the parent `
` and the `` itself. Didn't seem to make a difference. — lhan, May 27 '11 at 16:04

score 3 · Answer 1 · answered May 27 '11 at 19:08

3

It sounds like you should set:

overflow:hidden;

in your div's style. This should stop the scrollbars from appearing.

answered May 27 '11 at 19:08

bOkeifus

121
8

Thanks for the reply! That is a great idea but I think the `containment: 'parent'` is preventing overflow. Adding the `overflow:hidden;` didn't seem to make a difference. However, if I remove the containment, it allows me to drag outside of the div, with the overflow visible. Any thoughts? – lhan May 27 '11 at 19:12
@Lloyd - @bOkeifus is right. +1. You take off `containment: 'parent'` and add `overflow: hidden;` to the container and you get your achieved results. Check out my answer with the working jsFiddle demo. – Code Maverick May 27 '11 at 19:35

score 3 · Accepted Answer · answered May 27 '11 at 19:30

3

@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;
}

answered May 27 '11 at 19:30

Code Maverick

20,171
12
62
114

I've updated again to include my entire ``. It still lets me drag the image outside of the `
` container. Can you see what I'm doing wrong?
– lhan May 27 '11 at 20:05
1

Wrap your styles and scripts with ``. – Code Maverick May 27 '11 at 20:09
If that doesn't fix it, create a [jsFiddle](http://jsFiddle.net) that reproduces your error. – Code Maverick May 27 '11 at 20:13
Thanks for the advice. Updated again. Same thing. – lhan May 27 '11 at 20:14
I'm wondering if my jquery version is the problem? in the JSFiddle example, using 1.5.2 seems to work but 1.6 does not. I'll try switching my versions in code. – lhan May 27 '11 at 20:16
1

Try adding `` to your head section. – Code Maverick May 27 '11 at 20:22
I did 1.8.13, but you will have to do 1.8.12 since that's the jQuery UI version you are using. – Code Maverick May 27 '11 at 20:24
The Jquery version didn't seem to make a difference, and @Scott, adding the new stylesheet didn't seem to make a difference either. – lhan May 27 '11 at 20:24
If you look at my jsFiddle. It's working for me. What browser are you in so I can test that too? – Code Maverick May 27 '11 at 20:26
GOT IT! I copied the HTML from @Scott's JSFiddle. Now I'll have to compare that to my code and figure out what the problem was. I'm guessing it was one of the referenceds JS files? – lhan May 27 '11 at 20:28
Yea ... it's possible. I would just reference the hosted file instead of a local file. That way you know you have everything in there and you don't have to worry about anything. Plus, if you reference the .min version, it's so small, it doesn't matter. – Code Maverick May 27 '11 at 20:30
On a side note, is that a good practice to reference external JS files like that? I mean, can you safely assume that it won't change and break your code? Or do they always just add new files and leave the older versions alone? – lhan May 27 '11 at 20:31
1

Yea, it is. The way I showed you in http://stackoverflow.com/questions/6144188/cant-get-jquery-draggable-plugin-to-work is the best practice. And yes, they will always remain the same. Each time they release a new version, it's a new file, and the older version remains for backward compatibility. – Code Maverick May 27 '11 at 20:34
Awesome! You've saved me again! – lhan May 27 '11 at 20:43
LoL ... glad you are all set! – Code Maverick May 27 '11 at 20:45

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

2 Answers2