Click n drag

[allan-bonadio]

This is a click-drag-drop example, using regular mouse events, not d&d events. I was surprised that MDN didn't seem to have such an example yet! I've been doing interaction like this for 10+ years, and I've picked up lots of unobvious tips and tricks, in many cases, the hard way.

I've been paying attention to the fact that other programmers will copy/paste into their own code, trying to make the code general, with lots of comments.

I've also added a set of suggestions for more modern methods and user-friendly effects. This'll work on all browsers, as is, from the last 10 years.

[allan-bonadio]

my rationale for this PR is that I once had a coworker whose task was to make a list re-arrangeable by clicking and dragging elements up or down. She used the full d&d API, which was way overkill. She had to design some code-independent data format, etc. Despite the fact that the data was in the same address space, was involved with the UI in that page, and limited to its enclosing element. And was limited to the associated JS code and the backend managing it.

d&d is for dragging to and from other apps, or at least other web pages, not within the same JS global space. These should be done with old fashioned mousedown/move/up events, as this example illustrates. There's probably a lot of other programmers who have fallen into this trap. Ultimately, I want the d&d article to point this out, but there's some more contributions I need to do first, after this and the 'mouse & pointer event pages updates #36993' PR .