Slate: Q: Is it possible to drag and drop blocks with a sort of dragging preview block?

Created on 2 May 2017 · 8Comments · Source: ianstormtaylor/slate

Hi,

I am looking to create drag and drop blocks and while i know that selections can be dragged etc my use case is a bit more complicated. Say i have a custom block defined similar to your embeds example where by the YouTube player is embedded within some wrapper component with a drop zone/handle area at the top. Would it be possible to make the block draggable as well as show a sort of 'drag preview' while this block is being dragged within the document? Here is a gif of what i would like to accomplish.

Alt Text

Also not too certain if it would be possible to use react-dnd inside the editor?

Any insights would be greatly appreciated!

question

Source

deep-c

👍4

Most helpful comment

@SamyPesse @lxcid While i havent really spent a lot of time yet (just started using it over the last couple of days so im still getting familiar with it) however it would be great to get a bit of an idea of how you approached using react-dnd with slate. For example did u define slate block component(s) a wrapper component which is designated as a drag-source with the editor itself a target? How did you go about reordering the slate state on drop?

deep-c on 3 May 2017

👍3

All 8 comments

We've implemented in a beta version of GitBook using react-dnd.

A placeholder to indicate the drop position is easy, but a "live" dropping when hover is not working because of slate performance (like on this example: http://react-dnd.github.io/react-dnd/examples-sortable-simple.html).

SamyPesse on 2 May 2017

react-dnd is also what I end up using for drag and drop.

lxcid on 2 May 2017

👍1

@SamyPesse @lxcid Would you have a gist/plugin available for integrating react-dnd with Slate?

@SamyPesse Also curious about the performance issue in "live" dropping! Could you share more?

oyeanuj on 2 May 2017

deep-c on 3 May 2017

👍3

Very interesting

thepian on 12 May 2017

@SamyPesse Could you elaborate on this as per @deep-c's request please? I would be very interesting to hear your approach too!

hmaurer on 16 Jun 2017

My use case is probably out of the norm. My drag source and drop target is component outside of slate but they wrapped a slate component. But I think I understand slate enough to give some informed guess.

You should be able to create drag source as part of your slate components. Best way to do that by defining them in your schema. If you wan to drag block like paragraph, you probably want to override the default rendering in schema to include the drag source and/or drop target there.

The snapshot mechanism is a browser level function but there's way to control that manually. Browser snapshot only work for html based component if I'm not wrong.

You definitely need to update your slate state (try using the transform methods) but i'm not sure how it will interfere with your drag source you holding. So there's might be more state tracking involves, or maybe not. You do need to try out though.

I hope this help though, its a lot of trials and errors for me.

lxcid on 31 Jul 2017

Hey, thanks for using Slate! Unfortunately, we can't offer support for usage questions in the issues here because it becomes overwhelming to maintain the project if the issues are filled with questions.

However, we do have a Slack channel and people are constantly asking and answering questions in there. So I'm going to close this issue, but I definitely recommend joining the Slack channel if you want to find people that might be able to help.

Thanks for understanding!