Google Blockly - 将工具箱附加到单独的 div

Question

我一直在尝试使用 Blocky 开发一个简单的基于动画的应用程序并遇到了这个问题。如文档中所述，我创建了工具箱的 xml 树结构，然后当我创建 Blockly 的新实例时，它会将工具箱附加到特定的 div.

例如：

var workspace = Blockly.inject('blocklyDiv', {
            media: './media/',
            toolbox: document.getElementById('toolbox'),
            trashcan: true
        });

虽然效果很好，但它并不能让我们决定我们要保留工具箱的地方。在我的应用程序中，我想将工具箱与工作区分开放置（在单独的 div 中），但我在他们的文档中找不到任何指南来做到这一点。

有人可以帮我解决这个问题吗？

Answer 1

回答我自己的问题，因为我没有得到任何回复:)

截至目前，blockly 没有选项可以将工具箱保留在它自己的容器中而不是 injectionDiv（它默认创建）。因此，解决方法是等到 Blockly 创建 injectionDiv、弹出窗口、工作区，然后动态更改工具箱在 injectionDiv 中的位置。

您还可以在 injectionDiv 中附加您需要的任何其他元素并动态更改它们的位置。您可能需要根据您正在做的事情更改一些核心价值观。基本思想是您需要将所有内容保存在 injectionDiv :)

Google Blockly - 将工具箱附加到单独的 div

Google Blockly - Append toolbox to a separate div

html

javascript

css

canvas

blockly