1.element-tiptap和vuedraggable的拖拽冲突

element-tiptap和vuedraggable的拖拽冲突

       今天分享一个我遇到的前端开发问题，涉及element-tiptap和vuedraggable的拖拽冲突。项目中有一个A区域和一个B区域。A区域的Vue组件通过Vuedraggable进行拖拽，而B区域则使用了element-tiptap组件，排序前指标源码用于高级编辑。系统源码群但当B区域内存在element-tiptap组件时，从A区域拖拽的组件文本内容意外地被添加到了element-tiptap组件中，而非创建新组件。

       问题核心在于HTML元素的`contenteditable="true"`属性。当一个元素具有此属性时，其他页面元素默认可以将选中文本拖拽到该元素中。我的91影院 源码目标是阻止非目标页面元素的文本内容被拖拽到element-tiptap组件中。

       我尝试了多种解决方案，包括查找element-tiptap官方文档和源代码，查看是否有关于防止拖拽的组件配置。然而，小组社区源码onDrop方法的前后打印结果并没有提供我需要的答案。尝试将HTML元素的`draggable="false"`属性设置为`false`也未能解决问题，因为element-tiptap中自定义了drop事件的处理函数。

       经过深入分析，补码源码转换我发现element-tiptap在具有`contenteditable="true"`属性的div（类名：ProseMirror）上添加了两个drop事件处理函数，这在框架代码中有详细的处理流程。我的需求是阻止特定场景下的拖拽行为，因此决定在框架代码中删除这个事件处理函数，以达到问题解决的目的。

       总结经验教训，前端框架的高级特性通常基于不常见的HTML属性实现，因此在使用框架时，深入理解其原理至关重要。编写简洁、可复用的代码是优化项目维护性的关键。同时，熟悉TypeScript等现代框架中面向对象的实践，有助于避免过度暴露或隐藏组件属性。最后，对于引入的框架，评估其组件复用度和对项目后期维护的影响至关重要。