Allow dynamic droppable configuration using a function

快速解答作者 rywilson28

相关公关：https://github.com/artf/grapesjs/pull/3393

问题

我有一个要求，不能用选择器来判断某个元素是否可以丢弃。例如： ![图片]（https://user-images.githubusercontent.com/45426659/113861790-96afbf00-9775-11eb-9369-2a18a71c0dd6.png） “子”组件必须位于“父”组件中，但如果子组件包含 ref 属性，只能将其拖入与当前父组件匹配的 ref 值的其他父容器中。根据上述标记，子组件可以丢弃到最后一个容器，但不能丢弃参考为5678的容器。不过，第二个子元素可以被丢弃到任一父组件中。如果可丢弃函数允许以下函数，这将很容易实现：可掉落：（src，目标）=> { 一些逻辑返回真值; }, 这需要对分拣器进行相当简单的更改：检查目标是否能接受源让 droppable = trgModel.get（'droppable'）; 如果（typeof droppable === '函数'） { 设 res = 可掉落（src， trg）; result.droppable = res; result.dropInfo = res; 可丢弃 = res; } 否则 { 现有逻辑

回答（3）

rywilson28• 2021年4月7日

rywilson28• 2021年4月21日

@artf对这个功能或PR的做法有任何疑问吗？

GJSBlock• 2026年5月17日

谢谢你举报，@rywilson28。关于FEAT：允许使用函数动态丢弃配置的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*”事件进行细致跟踪构建一个插件，扩展编辑器并具备此功能正式宣布：如果此功能能惠及更多用户，考虑在 GrapesJS 仓库...

在 GitHub 上查看完整讨论 →