Fixes to drag operations page

[wbamberg]

Description

Rewrite the page to use addEventListener rather than HTML event attributes, and have a better example in "Specifying drop targets". This PR replaces #20048.

But also a bit of yak-shaving:

• remove some Firefox-only stuff (:-moz-drag-over and XUL(!))
• sentence case for headings

I used Prettier so it has also reformatted other code samples. I hope that is OK.

Motivation

Better practice code samples.

Related issues and pull requests

Relates to #20048.

[github-actions]

Preview URLs

• /en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations

(this comment was updated 2022-09-09 16:07:19.322311)

[teoli2003]

A few nit, and a problem at doDrop

[teoli2003]

nit:

Suggested change

	draggableElement.addEventListener("dragstart", (event) =>
	event.dataTransfer.setData("text/plain", "This text may be dragged")
	);
	draggableElement.addEventListener("dragstart", (event) => {
	event.dataTransfer.setData("text/plain", "This text may be dragged");
	});

[wbamberg]

This is interesting and I'm not sure what the right thing to do is. I wrote:

draggableElement.addEventListener("dragstart", (event) => event.dataTransfer.setData("text/plain", "This text may be dragged"));

(which is fine AFAIK) but which Prettier auto-formatted to:

draggableElement.addEventListener("dragstart", (event) =>
  event.dataTransfer.setData("text/plain", "This text may be dragged")
);

So if we want to rely on Prettier auto-formatting, then we should not make your suggested change.

[teoli2003]

If you had written:

draggableElement.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", "This text may be dragged");});

The results would have been:

draggableElement.addEventListener("dragstart", (event) => {
  event.dataTransfer.setData("text/plain", "This text may be dragged");
});

So the question here is not Prettier formatting, but do we add braces when there is only one operation and no (real) return value (ok, it returns something, but not useful here)? We recommend using consise body (or implicit return) with arrow functions when possible, but is this the case?

(We skipped this question while reviewing the JS guidelines)

[wbamberg]

If you had written:

draggableElement.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", "This text may be dragged");});

The results would have been:

draggableElement.addEventListener("dragstart", (event) => {
  event.dataTransfer.setData("text/plain", "This text may be dragged");
});

So the question here is not Prettier formatting, but do we add braces when there is only one operation and no (real) return value (ok, it returns something, but not useful here)? We recommend using consise body (or implicit return) with arrow functions when possible, but is this the case?

Do you mean, is it possible? Of course it is.

But it doesn't matter whether we use the return or not. If my code had been:

const myItemsWithALongEnoughName = [1, 2, 3, 4];
const filteredWithALongEnoughName = myItemsWithALongEnoughName.filter((item) => item < 3);

console.log(filteredWithALongEnoughName);

...then Prettier would do:

const myItemsWithALongEnoughName = [1, 2, 3, 4];
const filteredWithALongEnoughName = myItemsWithALongEnoughName.filter(
  (item) => item < 3
);

console.log(filteredWithALongEnoughName);

It's just wrapping lines.

So the question is: do we say you can't use the concise form if it would give you a line long enough for Prettier to wrap? I don't think we should do this, because it goes against the idea of using Prettier, which is basically: you don't have to worry about what Prettier will do, or have any knowledge of its config.

[wbamberg]

So I think we should allow (maybe even encourage) people to use to use the concise form if it's allowed, and allow Prettier's wrapping if Prettier decides to wrap.

[teoli2003]

No strong feelings here.

[teoli2003]

Suggested change

	```js
	const draggableElement = document.querySelector('p[draggable="true"]');
	draggableElement.addEventListener("dragstart", (event) =>
	event.dataTransfer.setData("text/plain", "This text may be dragged")
	);
	```js
	const draggableElement = document.querySelector('p[draggable="true"]');
	draggableElement.addEventListener("dragstart", (event) => {
	event.dataTransfer.setData("text/plain", "This text may be dragged");
	});