Kurviger.de | Application | Blog | Frequently Asked Questions (FAQ) | Legal Notice | Privacy Policy

Moving points via drag & drop - usability issue

I have made a test route here:

I have decided, I don’t want to drive a circle but an “8” so that the new route would be: Start - 1 - 3 - 2 - 4 - Finish

Point 3 shall be the new point 2. So I drag it after point 1. Before releasing the mouse button, I see the green line between 1 and 2 and that’s where I want to have it - right after point 1.
After I release the mouse button, the old point 3 has become 1 and the old point 1 has become 2:

The expected route would be:

1 Like

Is that a new feature I don’t know yet? Do I have to enable something?

The green line seems to indicate the waypoint to be replaced?

In your example you need to move the green line to waypoint 2.

Yes Emux, it looks like this is the way it should be understood. But in my opinion this is a strange way to do the task. I think I have never seen a GUI behaving like this when it came to sorting entries manually.
I haven’t written of a “bug” on purpose. I just wanted to give user feedback and therefore made a detailed description of how I think and proceed. If the programmer thinks that this is the best way of sorting the points, it’s okay.

Hello Patrick, after you have opened the waypoint list, you can drag and drop the waypoints.

When you move it up, a green line appears which apparently means that the underlined point (here 1) will be replaced by the point in the red rectangle:

I agree with @Spoony. Intuitively, I would have moved the route points like this, too.

ah! that one! yeah that has been glitchy since the beginning, should’ve made a post in the forum back then. I always assumed robin would polish that at some point, but from what little web dev experience I have I also know that lists and remembering states of movable list items is a pain in the backside…

Thanks a lot for reporting this. With the Redesign it is finally possible to improve this visualisation. I will check what can be done to improve the visualisation for this.

BTW: if you have ideas/proposals, please feel free to let us know. I have a few things in my mind already as well.

Yes, drag & drop is a mess for web :smiley:.

1 Like

This applies to all platforms and usually requires custom implementation. :slightly_frowning_face:

Thanks again for reporting this issue, I just deployed a fix that should improve drag & drop behaviour :slight_smile:. Please let me know if this fixes the issues for you?

Holy shit was I excited to read this and I immediately tried it out, but I must say I’m a bit… meh on it currently. I get what you are trying to do with the alpha see-through, but I think at least the target isn’t distinct enough

The waypoints move apart a bit, so there would be some space for a drop-in-hint. Usually, a lot of lists do this by keeping the color of the line item and then “opening” the background color up so to speak. Maybe something like this?

I am not 100% sure what you mean to be honest :smiley:. I am not sure why there is so much white color in the screenshot?

Do you see an issue with the fading “source” or do you see an issue to visualize where you drop the element?

Also I am not really sure about using a white background color here, but maybe we can find a good visualisation. Please also feel free to link to an example where drag&drop list reordering is done in a way that you like.

The white color is supposed to visualize the drop target so that it’s clearer where your card will land. I think the drop target should have the color of the list backgroung. I would also argue for making the card you hold in your hand less see-through. Demo… well… vanilla angular stuff? Dunno :smiley:
https://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested

1 Like

Ok, that is already the case? Or do you mean a different color like in your example they seem to create an empty element and give it a gray color to show where it would be dropped.

I can double check if this can be changed, but probably a bit complicated as the browser handles this internally.

“Vanilla Angular” :smiley:. The Kurviger website does not use Angular. Angular is a rather heavy web framework by Google, so I wouldn’t call it Vanilla :slight_smile:.

Thanks a lot for providing this demo, the empty gray element that is created to show the drop location is a nice addition and something I thought about as well.

But yeah, since you have to create a element within the list I haven’t done that yet, but I can certainly add it to the todo list :slight_smile:.

Made a test. For me it’s much better than before. Perhaps some minor improvements (see pictures):

  1. Selecting the waypoint at the icon on the right. Ok.
    grafik

  2. Moving with pressed mouse button. Perhaps some improvements (see right picture).


    Perhaps the copy of selected waypoint elements not moving so much to the right and with less transparency.

  3. Moved to the desired position in waypoint list, mouse button still pressed.


    Impovements described above are still visible.

  4. Moved to the desired position in waypoint list, mouse button isn’t pressed. OK.
    grafik

Don’t know, if it is possible in this or a similar way.

1 Like

Thanks for the hints, yes that can be done :slight_smile:. Will be updated in a few minutes :slight_smile:

Much better than before :slightly_smiling_face:.

grafik

The moved elements should be a little bit more visible.

  • The waypoint symbol perhaps only with a little bit more visibility
  • The waypoint name with more visibility (perhaps like the move and delete icons)
  • The move icon (=) and delete icon (x) visibility is ok.
    Then it could be more obvious.

Then a test with browser (firefox) zoom 80 %. There is an additional issue:

grafik

When moving cursor straight upwards then the moved elements go to the left. They should move upwards (nearly) like the cursor.

With the changes mentioned above for me it would be perfect :wink:.

1 Like

Thanks for testing!

Yes the problem is that browsers handle these things themselves, so I can only give hints to the browser how it should behave and hope for the best :slight_smile:.

So unfortunately, that is something I am not sure if this can be changed :frowning:

Not nice to here, but that’s life :wink:. But my suggestions would solve only minor issues. Sometime i tend to the perfect solution. No problem.

1 Like