使用jQuery UI开始在draggable div之外拖动

Question

我使用此代码的第一个示例：http://jqueryui.com/draggable/#handle，如下所示：

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

 #draggable {
   width: 100px;
   height: 100px;
   padding: 0.5em;
   float: left;
   margin: 0 10px 10px 0;
 }
 #draggable p {
   cursor: move;
 }

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content">
  <p class="ui-widget-header">I can be dragged only by this handle</p>
</div>

我会在“可拖动的手柄”外面开始触摸，并在鼠标经过它时激活它。

我尝试用图片更好地解释：

可能吗？我怎么能这样做？