I found a helpful JQuery example on this website and attempted to implement it.
Despite making some progress, the solutions I found online did not work entirely. I tried setting position: relative for the sortable ID and ui-state-default classes, as well as adding a cursorAt value in the sortable call.
However, I encountered an issue where the first element aligns with the cursor on page reload but subsequent elements do not. I am at a loss for what to try next. Any suggestions?
Since I am using a Wordpress theme, I had to use !important to prevent other CSS styles from interfering.
https://i.sstatic.net/aFoIr.png
<title>jQuery UI Sortable - Default functionality</title>
<link rel='stylesheet' href='//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>
<link rel='stylesheet' href='/resources/demos/style.css'>
<script src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>
<script>
$( function() {
$('#sortable').sortable({cursorAt: { top: 0, left: 0 }});
$( '#sortable' ).disableSelection();
$( '#datepicker').datepicker();
} );
</script>
<div class='formStyle'>
... (omitted for brevity)
CSS
#sortable {
width: 250px;
position: relative !important;
}
li.ui-state-default.ui-sortable-handle {
position: relative !important;
}