Does jQuery UI draggable work with HTML5 output?
https://jqueryui.com/draggable/
It does, at least in the most recent version of the Chrome browser where it was tested. Here is a link to an example or you can try it in the iframe that follows. Go ahead. Click and drag the TOC.
Here is what was changed in the default page for the output after it was built.
This CSS link and script tag were appended to the head element. The script loads jQuery UI. Pages that use jQuery UI also require jQuery. But the HTML5 output already includes a version.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <!--Added jQuery UI for draggable TOC and Content panes --> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
Part of the div for the navigation resize bar was commented out. The bar doesn’t make as much sense if the panes are not connected.
<div id="navigationresizebar"> <!--<div id="show-hide-navigation" class="needs-pie" dir="ltr"> </div> --> </div>
Draggable behavior was added with jQueryUI and the navigation resize bar was hidden with a display:none style. This script was appended to the end of the body tag. The z-index for the navigation pane was bumped up so it will not get lost behind the content pane.
//Hide the navigation bar.
$( '#navigationresizeBar' ).style = 'display:none;';
//Make the navigation and content body panes draggable.
$( '#navigation' ).draggable();
$( '#contentBody' ).draggable();
//Bring the navigation pane to the front.
$( '#navigation' ).css('z-index', 100);
That was it. There wasn’t much to do. A bootstrapper for the JavaScript toolbar would be a nice follow-up for this little experiment. Some other finishing touches could be a drag handle and maybe some resizable behavior for the navigation and content panes. Those are possible with the jQuery UI library. But I just wanted to see if draggable works on a TOC pane.