Geek asks and answers

JQuery Draggable - restrict parent element but allow sliding movement on parent object?

I am using the jQuery Draggable plugin . I am trying to create an image editing control in which a user can move (and ultimately resize) an image with drag and drop. If you look here, you will see that you can drag the gray square and if it goes outside the frame, you will see the scroll bars and you can continue to drag. I would like to achieve the same functionality without scrollbars. You should be able to drag the image, and if the image goes beyond the frame, it should slide under the frame. The frame should not be enlarged or scroll bars appear. I would think that this should be possible, but I did not find a way to do this 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>

. draggable <img> <div> - ?

. , , . , , <div> / draggable <img>. , <div>, , <div> . <img> <div>, .

+3
2

@bOkeifus . jsFiddle:

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;
}
+3

, :

overflow:hidden;

div. .

+3

More articles:


All Articles