update dnd examples to not use `dataTransfer.setData`

[kerem0comert]

Please describe the feature that you want to propose

I have implemented a Palette of different nodes using the provided example in Drag and Drop and this works well.

The crucial bit in this structure is of course the type data set with const type = event.dataTransfer.setData('application/svelteflow', nodeType); from Sidebar.svelte and read with const type = event.dataTransfer.getData('application/svelteflow'); in Flow.svelte which lets us deduce the type of the node currently being dragged and dropped.

However, I also need access to this type variable either on:dragstart or while the drag is being made (on:dragover), and either is ok for me.

The problem is:

• In the case of on:dragover: While event.dataTransfer.dropEffect = 'move is available, and I can see that the type data should also be available, as when I debug in the onDragOver event, I see the event object available as:

DataTransfer {dropEffect: 'none', effectAllowed: 'move', items: DataTransferItemList, types: Array(1), files: FileList}
dropEffect = 'none'
effectAllowed = 'move'
files = FileList {length: 0}
items = DataTransferItemList {0: DataTransferItem, length: 1}
types = (1) ['application/svelteflow'] // the key is here
[[Prototype]] = DataTransfer

but still event.dataTransfer.getData(application/svelteflow) returns empty string ('').

My understanding is that this data not being available in the on:dragover event is an intentional result of the DnD specification. Is this correct, or is there a way to make this data available in this event?

• In the case of on:dragstart: While it is also enough for me to be able to receive this type data on:dragstart, this event just does not fire for me, in SvelteFlow version: 0.1.14. My Flow component looks as follows, and all the other events that I defined there fire, apart from on:dragstart

 <Palette />
  <SvelteFlow
    initialViewport={INITIAL_VIEWPORT}
    nodes={nodesWritable}
    edges={edgesWritable}
    nodeTypes={STATE_TYPE_TO_SVELTE_NODE_COMPONENT}
    edgeTypes={EDGE_TYPE_TO_SVELTE_EDGE_COMPONENT}
    on:nodecontextmenu={handleContextMenu}
    on:paneclick={handlePaneClick}
    on:dragstart={(e) => console.log('Drag start', e)} 
    on:dragover={onDragOver}
    on:drop={onDrop}
    on:nodeclick={handleNodeClick}
    on:nodedragstop={sendToHistory}
    on:edgemouseenter={handleEdgeMouseEnter}
    on:edgeclick={(e) => {
      console.log(`edge click: ${e.detail}`)
    }}
    onconnectend={handleEdgeConnectEnd}
    onconnectstart={handleEdgeConnectStart}
    autoPanOnNodeDrag
  >
    <div class="controls">
      <Controls orientation="horizontal">
        <ControlButton on:click={() => console.log('⚡️')}>⚡️</ControlButton>
      </Controls>
    </div>
    <Background variant={BackgroundVariant.Lines} />
    <MiniMap />
  </SvelteFlow>

I assume events like on:nodedragstart do not help either, as they are fired when a given node is dragged from within the canvas, rather than a drag start from an outside Palette.

[moklick]

It's a simplified example. I would not use event.dataTransfer.setData but use a store / local state for that. I will move this issue to the web repo to remind us that we need to ~add a note to~ update the dnd examples ~about this~.

You would not use on:dragstart for the SvelteFlow component, but for the things you want to drag to the SvelteFlow componemt (where on:drop is implemented).

[kerem0comert]

Alright, then I will implement it using a store.

You would not use on:dragstart for the SvelteFlow component, but for the things you want to drag to the SvelteFlow componemt (where on:drop is implemented).

I don't understand exactly what you mean here, though. I am using it at the same level as on:drop, on my SvelteFlow component. My expectation is that whenever I start dragging a node from my palette (that is outside my SvelteFlow component), as soon as that node enters the area of the SvelteFlow component the on:dragstart event would fire. As soon as the user drops the node into the component on:drop would get fired (and in fact on:drop does work this way). Is my understanding of on:dragstart not correct, could you elaborate?

[moklick]

on:dragstart is used for the draggable element (side bar node) and not for the drop zone (SvelteFlow pane).

[kerem0comert]

Right, now I see what you mean. Thanks!

[moklick]

closed by #466