手柄位于要拖动的元素外部的可排序元素？

Question

是否可以使元素可排序并使用句柄拖动其子元素但是句柄不是子元素的子元素？

由于多种原因，拖动控制柄将驻留在body元素中，而不是在要拖动的元素内。 JQuery可以这样排序吗？

以下是我想要实现的一个简单示例（不起作用）：

$(document).ready(function() {

  // How to associate a handle that sits outside the element to be dragged?
    $( ".elements" ).sortable({
     connectWith: ".elements",
     handle: ".handle"
  });
});

p {
  height: 100px;
  background-color: red;
}

.handle {
  width: 300px;
  height: 64px;
  margin: 20px;
  font-size: 2em;
  background-color: blue;
  cursor: move;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="handle" target="foo">
  <span>+ FOO Handle</span>
</div>

<div class="handle" target="bar">
  <span>+ BAR Handle</span>
</div>

<br/>
<br/>
<br/>
<br/>

<div class="elements">
  <p id="foo">Foo</p>
  <p id="bar">Bar</p>
</div>