I'm building the front-end part of an admin project. Right now I'm working on a page overview where you can sort the pages (as a list). I'm using jquery plugin nestedSortable, from here, to get the tree view functionality.
My problem: If the page has been scrolled the item you start dragging/sorting is positioned the amount of pixel scrolled down from the mouse instead of at the mouse as it should be (dragging/sorting before scrolling).
My options for the sorting list looks like this:
var ns = $('.sortable-list').nestedSortable({
forcePlaceholderSize: true,
handle: '.handle',
helper: 'clone',
items: 'li',
opacity: .9,
placeholder: 'sort-placeholder',
revert: 250,
tabSize: 15,
tolerance: 'pointer',
toleranceElement: '> div',
maxLevels: 4,
isTree: true,
expandOnHover: 700,
startCollapsed: true,
stop: function() {
updateList();
setTimeout(updateList, 100);
}
});
I also made a codepen thats illustrate my problem.
Do anyone know how to fix this problem? - Thank you in advance.
I believe that this was a bug in the nestedSortable library. There's a commit on the git repository that says it should fix that bug (https://github.com/ilikenwf/nestedSortable/commits/2.0alpha), so try upgrading to the latest version and see if that fixes your problem.
UPDATE: In fact, modifying your CodePen to use the latest version of the file works: http://codepen.io/anon/pen/yNPWKX.
The nestedSortable source file I used for the CodePen is:
<script src='http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js'></script>