Drag and drop blocks from one blockly div to another blockly div

[Hiskias Melke]

I was experimenting in a drag and drop functionality that allows something like when dragging and dropping image files from a file system to a browser or just dragging and dropping an object from one area to anther area. Is there a way to implement such a functionality in blockly? Thank you beforehand!

[Beka Westberg]

Hello,

It seems like your talking about two slightly different ideas, both of which have their own challenges :D

> something like when dragging and dropping image files from a file system to a browser

This idea sounds like serializing the workspace to a file, which the user downloads, and then allowing the user to deserialize it by dropping it onto the workspace. This idea is definitely possible! AppInventor does exactly this, by allowing the user to save a group of blocks as a png, and then drag that png into other projects to add the blocks there as well. All of AppInventor's logic for detecting a drop lives here, but there might be better file-drop tutorials elsewhere hehe.

> or just dragging and dropping an object from one area to another area

This would actually probably be trickier. Blockly doesn't really support the idea of workspaces interacting. For example, the connection checker has a specific safety check to prevent blocks from different workspaces connecting.

Your best option for getting this working is probably to use the event system (or a system you build) to communicate between the two workspaces. For example, say you have a block X in workspace A that you want to drag to workspace B. When you detect that block X has been "dropped" over workspace B, delete it from workspace A, and then recreate it in workspace A. The trickiest part will be making sure that X shows up at the right place in B, I'm not exactly sure how to achieve that :/

Someone else may have already gotten a system like this working though! (and hopefully they reach out)

I hope that helps! If you get something working, please share :D This sounds like a really cool project!

Best wishes,

Beka

On Sun, Feb 7, 2021 at 7:12 AM Hiskias Melke <hiskias...@gmail.com> wrote:

I was experimenting in a drag and drop functionality that allows something like when dragging and dropping image files from a file system to a browser or just dragging and dropping an object from one area to anther area. Is there a way to implement such a functionality in blockly? Thank you beforehand!

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/aba4c8ed-2e87-4e96-a445-ca3e327a0ce6n%40googlegroups.com.

[Hiskias Melke]

Oh thank you very much, that was able to point me to the right direction. I have manage to extract the block when it's being dragged now and I'm trying to recreate the block on another workspace. It doesn't necessarily have to be on the same position in my case. The dragging and dropping one with the file example is just to show what I needed to do but I didn't mean I'd literally be doing that. The second case has more to do with my project. But I am now stuck on recreating the block in the new workspace, I have the blocksvg object that I retrieved using the workspace.getBlockById(id) method, still working on using the returned object to create a new block in another workspace. If you got some pointers on that, it'd be very helpful 

[Beka Westberg]

Hmm well if you already have the block, I think the next trickiness is going to be creating an exact copy of that block (meaning same type, same field values, same mutator info, etc) on the other workspace. You could try to build that yourself, but it's probably easier to use the serialization system, which is already built to handle that stuff.

So what I'd try is:

1) Call Blockly.Xml.blockToDom (or blockToDomWithXY) to serialize the block.

2) Delete the block.

3) Call Blockly.Xml.domToBlock (in the new workspace) passing in the serialized block form step 1.

This should (hopefully) make sure that you get an exact copy of the block that was "dropped" in the new workspace =)

I'm glad it's going well so far :D Best of luck!

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/a8e58e33-e789-4427-88f3-c5d86db5d3b7n%40googlegroups.com.