HTML 5 Draggable Demo

Child can be dragged around inside parent

by Ben Clayton

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<title>jQuery UI Draggable - Default functionality</title>

<div id="outer" class="ui-widget-content draggable">
  <p>Parent Contianer</p>
  <div id="inner" class="ui-widget-content draggable">
    <p>Drag me around</p>
  </div>
</div>

CSS

#outer {
   width: 150px;
   height: 150px;
   padding: 0.5em;
 }

JavaScript

$(function() {
   $("#outer").draggable();
   // https://api.jqueryui.com/draggable/#option-containment
   $("#inner").draggable({
     containment: "parent"
   });
 });