ondragstart: convert static example to live example

[AnilSeervi]

Summary

ondragstart: convert static example to live example

Motivation

Open-source

Supporting details

Related issues

fixes portion of #11364

Metadata

• Adds a new document
• Rewrites (or significantly expands) a document
• Fixes a typo, bug, or other error

[github-actions]

Preview URLs

• https://pr15318.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/GlobalEventHandlers/ondragstart

Flaws

URL: /en-US/docs/Web/API/GlobalEventHandlers/ondragstart
Title: GlobalEventHandlers.ondragstart
on GitHub
Flaw count: 2

• macros:
  • wrong xref macro used (consider changing which macro you use)
  • wrong xref macro used (consider changing which macro you use)

External URLs

URL: /en-US/docs/Web/API/GlobalEventHandlers/ondragstart
Title: GlobalEventHandlers.ondragstart
on GitHub

No new external URLs

(this comment was updated 2022-04-27 06:11:51.862194)

[hamishwillee]

Perhaps a better model to copy would be this one: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick#syntax

[AnilSeervi]

updated

[hamishwillee]

Thanks @AnilSeervi but I would literally copy the structure, using value rather than return type - so it would look like this

[hamishwillee]

Excellent! I'd fix up the syntax section but otherwise this is much better.

[OnkarRuikar]

Suggested change

	<div id="target">Drop Zone</div>
	<div id="destination">Drop Zone</div>

As we are on an event page, the 'target' and 'event.target' can become source of confusion.
Also, in syntax section we used target.ondragstart but in code we say source.ondragstart. Are we calling draggable elements 'target' or 'source'? In the code we can not use target.ondragstart cos we are calling destination "target" here.

[OnkarRuikar]

Suggested change

	source.ondragenter = dragenter_handler;
	target.ondragenter = dragenter_handler;

I think these(also ondragleave) should be registered on drop target[ref]. On drag leave the target element is not resetting to white color from lightblue. There is no need to indicate that the draggable is on source element itself.

[OnkarRuikar]

@hamishwillee and @teoli2003, are we treating these pages as event pages or as property pages(cos they look like a property element.onXYZHandler).

Which tags are applicable to this page or such pages?

• Property
• Event
• GlobalEventHandlers
• Event Handler

[hamishwillee]

@OnkarRuikar I think all of these should "eventually" be event pages. However as the fix was to an old-style property page, I commented on the fix in that context. We certainly shouldn't block the fix here on converting to something else.

[OnkarRuikar]

@OnkarRuikar I think all of these should "eventually" be event pages. However as the fix was to an old-style property page, I commented on the fix in that context. We certainly shouldn't block the fix here on converting to something else.

I agree. Sorry for the miscommunication. I asked this in context of updating all the pages to modern structure. Like it's being done in #15335 (Update Method pages to modern structure) PR series. Once we fix the structure it can be done in one go.

---

Regarding this PR I think we need to put ondragenter and ondragleave handlers on the destination element(target) and not on source element. By putting it on source element we are indicating(with yellow color) that the source element is being dragged over itself. Unless that is the intention. If we look at the example in dragenter_event#examples the JSFiddle code handles it for all the containers.

Also, there is a bug that the destination element doesn't change back to original color(from lightblue) when dragged item leaves the destination element. target.ondragover is not the right event to turn destination color to blue as it keeps on firing while the draggable is over the target.

[Elchi3]

fwiw, I'm still working on event pages. Last week I finished WindowEventHandlers and GlobalEventHandlers is next on my list. The project is described here: openwebdocs/project#61 and I reported about how far we've come so far here: https://github.com/openwebdocs/project/blob/main/impact-report-q1-2022/impact-report-q1-2022.md#rewriting-reference-pages-for-all-web-platform-events

Updates to the example sections are great, so I appreciate this PR. Structurally we agreed that on- pages will be removed and we will just have eventname_event pages, so you maybe it is not worth investing into structural updates in this PR.

[hamishwillee]

Thanks all.

@AnilSeervi So the direction to you is to look at this suggestion by Onkar #15318 (comment) starting with "Regarding this PR I think we need to put ondragenter and ondragleave handlers on the destination element(target) and ..."

If/once that is OK we'll ignore any other issues and get this in.

[AnilSeervi]

I think the colors and events are applied correctly now.

[hamishwillee]

@OnkarRuikar This looks good to me, but probably best if you review the changes you requested ....

[OnkarRuikar]

@hamishwillee Looks good to me too.

[hamishwillee]

Thanks @AnilSeervi - much much better :-)