html5sortable
html5sortable copied to clipboard
Improve flicker dragging
I'm opening this issue because: improve drag element
supporting information:
- I use sortable version: 0.9.8
- I tested in the following browser (incl. versions): chrome 72.0.3626.109 (64bit)
- Windows, OS X/macOS, or Linux?: OS X/macOS
The current code uses height values even when moving left and right
and it should be drag over half of element's height
// To avoid flicker, determine where to position the placeholder
// based on where the mouse pointer is relative to the elements
// vertical center.
var placeAfter = false;
try {
var elementMiddle = offset(element).top + element.offsetHeight / 2;
placeAfter = pageY >= elementMiddle;
}
catch (e) {
placeAfter = placeholderIndex < thisIndex;
}
if (placeAfter) {
insertAfter(element, store(sortableElement).placeholder);
} else {
insertBefore(element, store(sortableElement).placeholder);
}
How about improving drag like this?
if you just get in the rectangle and try to respond.
This way, it does not matter whether you move it to the left or right.
This will help in natural movement for sort
// prevY, prevX global
var prevY = 0;
var prevX = 0;
// ...
try {
placeAfter = (1 >= (prevY - offset(element).top) * (pageY - offset(element).top))
|| (1 >= (prevX - offset(element).left) * (pageX - offset(element).left));
prevY = pageY;
prevX = pageX;
}
catch (e) {
placeAfter = placeholderIndex < thisIndex;
}
if (placeAfter) {
insertAfter(element, store(sortableElement).placeholder);
} else {
insertBefore(element, store(sortableElement).placeholder);
}
Maybe, adding this way as an argument would be nice
// like this
sortable('#some-sortable", {method: halfOfHeight});
sortable('#some-sortable", {method: Rectangle});
Thanks for using a good library 👍