How do I trap an image in a div with jQuery?

Question

I have a div, and I have a draggable image inside of the div. $("#image").draggable(); How do I keep the image from leaving the div?

$("#image").draggable();

div{
width:200px;
height:200px;
border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<div>     
    <img id="image" src="http://static.micheljansen.org/uploads/mac-osx-    arrow-cursor.png"/>
</div>

http://api.jqueryui.com/draggable/#option-containment – billyonecan May 24 '16 at 21:43 — billyonecan, May 24 '16 at 21:43
Oh, and sorry the image doesn't work. – Recoding May 24 '16 at 21:46 — Recoding, May 24 '16 at 21:46

score 3 · Accepted Answer · edited May 26 '16 at 16:24

You have to do this: containment: 'div',

Entire code:

$( init );
function init() {
$("#image").draggable({
containment: 'div',
});
};

div{
width:200px;
height:200px;
border: 1px solid black;
}
#image {
    height: 50px;
    width: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<div>     
    <img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/>
</div>

This should solve your problem. I tried it.

How do I trap an image in a div with jQuery?

1 Answers1