Fix broken links for drag-and-drop events (mdn#30680)

* Fix broken links for drag-and-drop events

* Fix dragend

* Fix dragenter

* Fix dragleave

* Fix dragover

* Fix dragstart

* Fix drop

* Grammar

* Grammar

* Update index.md

files/en-us/web/api/htmlelement/dragend_event/index.md

@@ -8,7 +8,9 @@ browser-compat: api.HTMLElement.dragend_event
 
 {{APIRef}}
 
-The `dragend` event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
+The `dragend` event is fired when a drag operation ends (by releasing a mouse button or hitting the escape key).
+
+This event is cancelable and may bubble up to the {{domxref("Document")}} and {{domxref("Window")}} objects.
 
 ## Syntax
 
@@ -31,17 +33,17 @@ A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}.
 _In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
 
 - {{domxref('DragEvent.dataTransfer')}} {{ReadOnlyInline}}
-  - : The data that is transferred during a drag and drop interaction.
+  - : The data that is transferred during a drag-and-drop interaction.
 
 ## Examples
 
-### Resetting opacity on drag end
+### Resetting opacity on dragend
 
 In this example, we have a draggable element inside a container. Try grabbing the element, dragging it, and then releasing it.
 
-We make the element half-transparent while it is being dragged, and listen for the `dragend` event to reset the element's opacity when it is released.
+We make the element half-transparent while it is dragged, and listen for the `dragend` event to reset the element's opacity when it is released.
 
-For a more complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
+For a complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
 
 #### HTML
 
@@ -56,7 +58,7 @@ For a more complete example of drag and drop, see the page for the [`drag`](/en-
 
 ```css
 body {
-  /* Prevent the user selecting text in the example */
+  /* Prevent the user from selecting text in the example */
   user-select: none;
 }
 
@@ -114,9 +116,3 @@ source.addEventListener("dragend", (event) => {
   - {{domxref("HTMLElement/dragenter_event", "dragenter")}}
   - {{domxref("HTMLElement/dragleave_event", "dragleave")}}
   - {{domxref("HTMLElement/drop_event", "drop")}}
-
-- This event on other targets:
-
-  - {{domxref("Window")}}: {{domxref("Window/dragend_event", "dragend")}} event
-  - {{domxref("Document")}}: {{domxref("Document/dragend_event", "dragend")}} event
-  - {{domxref("SVGElement")}}: {{domxref("SVGElement/dragend_event", "dragend")}} event

files/en-us/web/api/htmlelement/dragenter_event/index.md

@@ -8,9 +8,9 @@ browser-compat: api.HTMLElement.dragenter_event
 
 {{APIRef}}
 
-The `dragenter` event is fired when a dragged element or text selection enters a valid drop target.
+The `dragenter` event is fired when a dragged element or text selection enters a valid drop target. The target object is the _immediate user selection_ (the element directly indicated by the user as the drop target), or the {{HTMLElement("body")}} element.
 
-The target object is the _immediate user selection_ (the element directly indicated by the user as the drop target), or the {{HTMLElement("body")}} element.
+This event is cancelable and may bubble up to the {{domxref("Document")}} and {{domxref("Window")}} objects.
 
 ## Syntax
 
@@ -33,17 +33,17 @@ A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}.
 _In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
 
 - {{domxref('DragEvent.dataTransfer')}} {{ReadOnlyInline}}
-  - : The data that is transferred during a drag and drop interaction.
+  - : The data that is transferred during a drag-and-drop interaction.
 
 ## Examples
 
 ### Styling drop zones on dragenter
 
-In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and then releasing it.
+In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and releasing it.
 
-We listen for the `dragenter` event to give the other container a purple background while the draggable element is over it, to signal that the draggable element could be dropped on to the container.
+We listen for the `dragenter` event to give the other container a purple background while the draggable element is over it to signal that the draggable element could be dropped onto the container.
 
-Note though that in this partial example we haven't implemented dropping: for a complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
+However, in this partial example, we haven't implemented dropping: for a complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
 
 #### HTML
 
@@ -58,7 +58,7 @@ Note though that in this partial example we haven't implemented dropping: for a
 
 ```css
 body {
-  /* Prevent the user selecting text in the example */
+  /* Prevent the user from selecting text in the example */
   user-select: none;
 }
 
@@ -121,9 +121,3 @@ target.addEventListener("dragleave", (event) => {
   - {{domxref("HTMLElement/dragover_event", "dragover")}}
   - {{domxref("HTMLElement/dragleave_event", "dragleave")}}
   - {{domxref("HTMLElement/drop_event", "drop")}}
-
-- This event on other targets:
-
-  - {{domxref("Window")}}: {{domxref("Window/dragenter_event", "dragenter")}} event
-  - {{domxref("Document")}}: {{domxref("Document/dragenter_event", "dragenter")}} event
-  - {{domxref("SVGElement")}}: {{domxref("SVGElement/dragenter_event", "dragenter")}} event

files/en-us/web/api/htmlelement/dragleave_event/index.md

@@ -10,7 +10,7 @@ browser-compat: api.HTMLElement.dragleave_event
 
 The `dragleave` event is fired when a dragged element or text selection leaves a valid drop target.
 
-This event is not cancelable.
+This event is not cancelable and may bubble up to the {{domxref("Document")}} and {{domxref("Window")}} objects.
 
 ## Syntax
 
@@ -33,17 +33,17 @@ A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}.
 _In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
 
 - {{domxref('DragEvent.dataTransfer')}} {{ReadOnlyInline}}
-  - : The data that is transferred during a drag and drop interaction.
+  - : The data that is transferred during a drag-and-drop interaction.
 
 ## Examples
 
 ### Resetting drop zone styles on dragleave
 
-In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and then releasing it.
+In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and releasing it.
 
-We give the other container a purple background while the draggable element is over it, to signal that the draggable element could be dropped on to the container. We listen for the `dragleave` event to reset the container background when the draggable element is dragged off the container.
+We give the other container a purple background while the draggable element is over to signal that it could be dropped onto the container. We listen for the `dragleave` event to reset the container background when dragging the draggable element off the container.
 
-Note though that in this partial example we haven't implemented dropping: for a complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
+However, in this partial example, we haven't implemented dropping: for a complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
 
 #### HTML
 
@@ -58,7 +58,7 @@ Note though that in this partial example we haven't implemented dropping: for a
 
 ```css
 body {
-  /* Prevent the user selecting text in the example */
+  /* Prevent the user from selecting text in the example */
   user-select: none;
 }
 
@@ -121,9 +121,3 @@ target.addEventListener("dragleave", (event) => {
   - {{domxref("HTMLElement/dragover_event", "dragover")}}
   - {{domxref("HTMLElement/dragenter_event", "dragenter")}}
   - {{domxref("HTMLElement/drop_event", "drop")}}
-
-- This event on other targets:
-
-  - {{domxref("Window")}}: {{domxref("Window/dragleave_event", "dragleave")}} event
-  - {{domxref("Document")}}: {{domxref("Document/dragleave_event", "dragleave")}} event
-  - {{domxref("SVGElement")}}: {{domxref("SVGElement/dragleave_event", "dragleave")}} event

files/en-us/web/api/htmlelement/dragover_event/index.md

@@ -10,7 +10,7 @@ browser-compat: api.HTMLElement.dragover_event
 
 The `dragover` event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).
 
-The event is fired on the drop target(s).
+This event is cancelable and may bubble up to the {{domxref("Document")}} and {{domxref("Window")}} objects.
 
 ## Syntax
 
@@ -33,21 +33,21 @@ A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}.
 _In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
 
 - {{domxref('DragEvent.dataTransfer')}} {{ReadOnlyInline}}
-  - : The data that is transferred during a drag and drop interaction.
+  - : The data that is transferred during a drag-and-drop interaction.
 
 ## Examples
 
-### A minimal drag and drop example
+### A minimal drag-and-drop example
 
-In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and then releasing it.
+In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and releasing it.
 
 We use three event handlers here:
 
 - in the `dragstart` event handler, we get a reference to the element that the user dragged
 - in the `dragover` event handler for the target container, we call `event.preventDefault()`, which enables it to receive `drop` events.
 - in the `drop` event handler for the drop zone, we handle moving the draggable element from the original container to the drop zone.
 
-For a more complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
+For a complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
 
 #### HTML
 
@@ -62,7 +62,7 @@ For a more complete example of drag and drop, see the page for the [`drag`](/en-
 
 ```css
 body {
-  /* Prevent the user selecting text in the example */
+  /* Prevent the user from selecting text in the example */
   user-select: none;
 }
 
@@ -130,9 +130,3 @@ target.addEventListener("drop", (event) => {
   - {{domxref("HTMLElement/dragenter_event", "dragenter")}}
   - {{domxref("HTMLElement/dragleave_event", "dragleave")}}
   - {{domxref("HTMLElement/drop_event", "drop")}}
-
-- This event on other targets:
-
-  - {{domxref("Window")}}: {{domxref("Window/dragover_event", "dragover")}} event
-  - {{domxref("Document")}}: {{domxref("Document/dragover_event", "dragover")}} event
-  - {{domxref("SVGElement")}}: {{domxref("SVGElement/dragover_event", "dragover")}} event

files/en-us/web/api/htmlelement/dragstart_event/index.md

@@ -10,6 +10,8 @@ browser-compat: api.HTMLElement.dragstart_event
 
 The `dragstart` event is fired when the user starts dragging an element or text selection.
 
+This event is cancelable and may bubble up to the {{domxref("Document")}} and {{domxref("Window")}} objects.
+
 ## Syntax
 
 Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
@@ -31,17 +33,17 @@ A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}.
 _In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
 
 - {{domxref('DragEvent.dataTransfer')}} {{ReadOnlyInline}}
-  - : The data that is transferred during a drag and drop interaction.
+  - : The data that is transferred during a drag-and-drop interaction.
 
 ## Examples
 
 ### Setting opacity on drag start
 
 In this example, we have a draggable element inside a container. Try grabbing the element, dragging it, and then releasing it.
 
-We listen for the `dragstart` event to make the element half transparent while it is being dragged.
+We listen for the `dragstart` event to make the element half transparent while dragged.
 
-For a more complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
+For a complete example of drag and drop, see the page for the [`drag`](/en-US/docs/Web/API/HTMLElement/drag_event) event.
 
 #### HTML
 
@@ -56,7 +58,7 @@ For a more complete example of drag and drop, see the page for the [`drag`](/en-
 
 ```css
 body {
-  /* Prevent the user selecting text in the example */
+  /* Prevent the user from selecting text in the example */
   user-select: none;
 }
 
@@ -114,9 +116,3 @@ source.addEventListener("dragend", (event) => {
   - {{domxref("HTMLElement/dragenter_event", "dragenter")}}
   - {{domxref("HTMLElement/dragleave_event", "dragleave")}}
   - {{domxref("HTMLElement/drop_event", "drop")}}
-
-- This event on other targets:
-
-  - {{domxref("Window")}}: {{domxref("Window/dragstart_event", "dragstart")}} event
-  - {{domxref("Document")}}: {{domxref("Document/dragstart_event", "dragstart")}} event
-  - {{domxref("SVGElement")}}: {{domxref("SVGElement/dragstart_event", "dragstart")}} event

files/en-us/web/api/htmlelement/drop_event/index.md

@@ -10,6 +10,8 @@ browser-compat: api.HTMLElement.drop_event
 
 The **`drop`** event is fired when an element or text selection is dropped on a valid drop target. To ensure that the `drop` event always fires as expected, you should always include a [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault) call in the part of your code which handles the [`dragover`](/en-US/docs/Web/API/HTMLElement/dragover_event) event.
 
+This event is cancelable and may bubble up to the {{domxref("Document")}} and {{domxref("Window")}} objects.
+
 ## Syntax
 
 Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
@@ -31,13 +33,13 @@ A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}.
 _In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._
 
 - {{domxref('DragEvent.dataTransfer')}} {{ReadOnlyInline}}
-  - : The data that is transferred during a drag and drop interaction.
+  - : The data that is transferred during a drag-and-drop interaction.
 
 ## Examples
 
-### A minimal drag and drop example
+### A minimal drag-and-drop example
 
-In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and then releasing it.
+In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and releasing it.
 
 We use three event handlers here:
 
@@ -60,7 +62,7 @@ For a more complete example of drag and drop, see the page for the [`drag`](/en-
 
 ```css
 body {
-  /* Prevent the user selecting text in the example */
+  /* Prevent the user from selecting text in the example */
   user-select: none;
 }
 
@@ -96,7 +98,7 @@ target.addEventListener("dragover", (event) => {
 });
 
 target.addEventListener("drop", (event) => {
-  // prevent default action (open as link for some elements)
+  // prevent default action (open as a link for some elements)
   event.preventDefault();
   // move dragged element to the selected drop target
   if (event.target.className === "dropzone") {
@@ -128,9 +130,3 @@ target.addEventListener("drop", (event) => {
   - {{domxref("HTMLElement/dragover_event", "dragover")}}
   - {{domxref("HTMLElement/dragenter_event", "dragenter")}}
   - {{domxref("HTMLElement/dragleave_event", "dragleave")}}
-
-- This event on other targets:
-
-  - {{domxref("Window")}}: {{domxref("Window/drop_event", "drop")}} event
-  - {{domxref("Document")}}: {{domxref("Document/drop_event", "drop")}} event
-  - {{domxref("SVGElement")}}: {{domxref("SVGElement/drop_event", "drop")}} event