Я скопировал и вставил пример JQuery здесь: https://jqueryui.com/sortable/
На их страницах работает отлично, на моем он работает нормально ТОЛЬКО если я наверху страницы.По мере того, как я перемещаюсь вниз, если я перемещаю элемент, он смещается вместе с курсором.Как будто верхняя часть страницы остается «отправной точкой», откуда он отслеживает мой курсор.Я не могу понять это или почему на моей странице (WordPress) это делает.Скриншот того, что происходит ниже, с кодом
На что мне обратить внимание, чтобы отладить это?Спасибо!
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<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'>
<!-- <style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style> -->
<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();
$('#sortable').disableSelection();
$('#sortable').cursorAt();
$('#datepicker').datepicker();
});
</script>
</head>
<body>
<form method='post'>
<div class='cycleText'>
<p>Choose a starting date</p>
</div>
<div class='cycleDate'><input type='date' name='dateCycleStart' id='datepicker'></div><br>
<div class='cycleText'>
<p>Drag and drog to order you moon centers.</p>
</div>
<ul id='sortable'>
<li name='1' class='ui-state-default'>Hairline<input type='hidden' name='1' value='Hairline'></li>
<li name='2' class='ui-state-default'>Eyebrows<input type='hidden' name='2' value='Eyebrows'></li>
<li name='3' class='ui-state-default'>Pinks of Cheeks<input type='hidden' name='3' value='Pinks of Cheeks'></li>
<li name='4' class='ui-state-default'>Lips<input type='hidden' name='4' value='Lips'></li>
<li name='5' class='ui-state-default'>Earlobes<input type='hidden' name='5' value='Earlobes'></li>
<li name='6' class='ui-state-default'>Nape of Neck<input type='hidden' name='6' value='Nape of Neck'></li>
<li name='7' class='ui-state-default'>Nipples<input type='hidden' name='7' value='Nipples'></li>
<li name='8' class='ui-state-default'>Navel<input type='hidden' name='8' value='Navel'></li>
<li name='9' class='ui-state-default'>Inner Thighs<input type='hidden' name='9' value='Inner Thighs'></li>
<li name='10' class='ui-state-default'>Clitoris<input type='hidden' name='10' value='Clitoris'></li>
<li name='11' class='ui-state-default'>Membranes of Vagina<input type='hidden' name='11' value='Membranes of Vagina'></li>
</ul>
<div class='cycleButton'><button type='submit'>Generate Calendar</button></div>
</form>
</body>
</html>