Free Online Tutorials

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

<div id="box" style="width:600px;height:200px;border:0px solid black;margin-bottom:5px">
  <div id="drag" class="drag">
    <p id="handle" style="border:1px solid gray;background-color:yellow;cursor:pointer;text-align:center">draggable</p>
    <p style="font-size:12px;">Drag me WITHIN yellow brick</p>
  </div>

  <div id="drag1" class="drag" style="cursor:pointer;">
    <p id="handle1" style="border:1px solid gray;background-color:yellow;text-align:center;cursor:default;">no drag</p>
    <p style="font-size:12px;">Drag me OUTSIDE yellow brick</p>
  </div>
</div>

CSS:

.drag {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  margin-left: 5px;
  text-align: center;
  background-color: lightgreen;
  float: left;
}

JAVASCRIPT:

$(function() {
  $("#drag").draggable({
    handle: $("#handle")
  });

  $("#drag1").draggable({
    cancel: "#handle1"
  });
});

Live Example: http://jsfiddle.net/sans_amour/dcn16tq9/