html5sortable icon indicating copy to clipboard operation
html5sortable copied to clipboard

Improve flicker dragging

Open clucle opened this issue 6 years ago • 0 comments

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 👍

clucle avatar Feb 18 '19 04:02 clucle