标签：draggable Modal 对话框 拖动 dragable content ivu modal

现象：

当给Modal组件添加 draggable 属性将对话框设为可拖动时，当拖动对话框时，对话框就消失(或者跑偏了）。

原因：

因为Modal组件使用了“自定义位置”的垂直居中，参考官方文档 https://www.iviewui.com/components/modal#ZDYWZ

结论：

draggable的原理也是通过修改对话框的位置CSS实现的，当拖动时相对于.ivu-modal修改.ivu-modal-content的top和left的值，而上面官方的自定义样式的例子中垂直居中用了flex部局，而之前没有加拖动属性时ivu-modal-content的positon是relative，加了draggable后，.ivu-modal-content元素上加了一个class: ivu-modal-content-drag, 导致ivu-modal的高度和宽度变成了0，按flex部局的效果，它就跑到了屏幕正中间。而正常拖动窗口时计算的top,left应该是按屏幕左上角得到的（因为iview会在拖动时将.ivu-modal的top值改为0，宽度变为auto）,所以就会出现对话框跑偏了（甚至跑出屏外看不到）。

标签：draggable,Modal,对话框,拖动,dragable,content,ivu,modal
来源： https://www.cnblogs.com/johnjackson/p/14918018.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。