Is it possible to make an element sortable and you drag its sub-elements using a handle BUT the handle is not a child of the sub-element?
For numerous reasons the drag handles will reside in the body element and not inside the element to be dragged. Will JQuery's sortable work this way?
Below is a simple example of what I would like to achieve (that does not work):
$(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>