Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve flicker dragging #485

Open
clucle opened this issue Feb 18, 2019 · 0 comments
Open

Improve flicker dragging #485

clucle opened this issue Feb 18, 2019 · 0 comments

Comments

@clucle
Copy link

clucle commented Feb 18, 2019

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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant