0

HTML supports the HTML Drag and Drop API (https://www.w3schools.com/html/html5_draganddrop.asp). SVG does not support the Drag and Drop API.

What options do I have to combine both so that a nested SVG in a HTML website can both receive and send Drag and Drop events from and to the outside HTML website it is living in?

  • Faking DnD with mousedown, mousemove and mouseup may work for the actual dragging part, but the world outside the bested SVG will not be able to receive those actions as it only listens to DnD events like dragstart, dragend, etc.
  • Manual triggering of dragstart is not really possible as instantiating a DataTransfer object manually is forbidden and will always be nulled due to security reasons.
  • When clicking on an SVG element, "catching" that event and generating a dummy HTML element to receive the click in order to generate a native dragstart event might not work due to timing issues?

Any other ways to marry the HTML world to the SVG world? Are there other alternatives to the Drag and Drop API?

EDIT:

<svg xmlns="http://www.w3.org/2000/svg" version="2.0" viewBox="0 0 100 100">
        <rect x="10" y="10" width="80" height="80" fill="green" draggable="true" ondragstart="alert('test')" />
    </svg>

As suggested by @RobertLongson I tried the above code to make a simple rect draggable with the regular HTML 5 Drag and Drop events. There is no alert happening and no such event gets triggered in an up to date Chrome.

BoA456
  • 341
  • 2
  • 15
  • Who says svg does not support that api? – Robert Longson Jul 13 '22 at 22:00
  • @RobertLongson https://stackoverflow.com/a/12288204/4601581 – BoA456 Jul 13 '22 at 22:09
  • That answer was written 10 years ago. Try the [SVG 2 attribute index](https://www.w3.org/TR/SVG2/attindex.html#RegularAttributes), drag attributes are listed there. – Robert Longson Jul 13 '22 at 23:14
  • @RobertLongson SVG 2 is a not yet released standard that has - to my knowledge - no official release date or fixed feature set. I would not like to rely on things that are "yet to come" or "bound to change". My question is, if there is a way to make both sides of the equation fit together. One side being SVG 1.1. – BoA456 Jul 14 '22 at 10:51
  • 1
    Chrome, Firefox, Safari and Inkscape are busily implementing SVG 2, finished or not. Where SVG 2 is incompatible with SVG 1.1 all browsers are targeting SVG 2, so relying on something in SVG 1.1 that is superseded by SVG 2 is certainly relying on something that's bound to change. – Robert Longson Jul 14 '22 at 11:02

0 Answers0