jQuery UI Dragging with containment

<!doctype html>
<html>
<head>
<meta charset=”utf-8″ />
<title>jQuery UI Dragging with containment</title>
<style type=”text/css”>
<!–
#drg {
    width:380px;
    height:210px;
    border:2px solid blue;
}
#prt {
    width:305px;
    height:100px;
    margin:8px;
    background:#F90;
}
#prt p {
    width:185px;
    margin:1px;
    background:#a7daa8;
}
–>
</style>
<script src=”http://code.jquery.com/jquery-1.8.2.js“></script>
<script src=”http://code.jquery.com/ui/1.9.1/jquery-ui.js“></script>
<script type=”text/javascript”><!–
$(document).ready(function() {
  // sets draggable the elements with id=”im”
  $(‘#im’).draggable({
    cursor: ‘move’,        // sets the cursor apperance
    containment: ‘#drg’    // sets to can be dragged only within “#drg” element
  });

  // sets draggable the paragraph inside #prt
  $(‘#prt p’).draggable({
    cursor: ‘move’,
    containment: ‘parent’      // sets to can be dragged only within its parent
  });
});
–></script>
</head>
<body>
<div align=”center”>
  <h2>jQuery UI Dragging with containment – gsivaprabu</h2>
  <div id=”drg”>You can drag the image any where in the box<br />
    <img src=”http://wqimg.s3.amazonaws.com/ut/ult/gsivaprabu-1004449.jpg” alt=”Rhomb” width=”50″ height=”70″ id=”im” />
    <div id=”prt”>
      <p>This paragraph can be dragged only inside the orange background (its parent)</p>
    </div>
  </div>
</div>
</body>
</html>