大家帮忙解决下这个关于MFC的拖拽文件问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了大家帮忙解决下这个关于MFC的拖拽文件问题相关的知识,希望对你有一定的参考价值。
我郁闷的快要哭了.................
1。我先建立个单文档应用程序,然后再加上个对话框(当点击单文档应用程序的某个菜单时弹出此对话框),对话框上面有个编辑框。
2。继承了个CEdit类,起名CMyEdit,然后创建个对话框类(关联此对话框),增加了对话框上编辑框的控制变量(没有用CEdit,用的CMyEdit);
3。现在我对对话框类和CMyEdit类均加上了拖拽消息映射,而且运行后对话框和编辑框均能响应拖拽消息。
看似一切顺利.........
但是我同学现在有个工程,单文档应用程序,且弹出某菜单时会出现个对话框,对话框上面有个编辑框。我按上面的步骤一步一步来,结果只有对话框响应拖拽消息,编辑框没有。。
哪个大侠帮忙,哥们感激不尽。。。。。
200大分送上,我郁闷的快哭了。。。。。。。
谢谢三楼四楼,这些我都注意了,我怀疑是不是我同学原先的对话框跟我现在做的对话框有区别
要让控件能够接受文件拖拽,还需要设置属性。在控件上点击右键,选择Properties->Extended Styles,点选Accept files选项
另外看下控件变量是control类型的,还是value类型的。(我想你既然是从基类继承过来的应该是control)control类型的才对. 参考技术A 大哥,你的问题太专业了,很想帮你但不会,要是没人会的话分给我吧,要不也浪费了 参考技术B 建议你去www.CSDN.net去问问,那里很专业! 参考技术C 1. 你确定你的编辑框类现在是映射成CMyEdit类了?
2. 在你的CMyEdit类中,你确定你所添加的拖拽消息映射正确吗?
通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言
关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。这是我在编写插件时遇到的问题,其实很多插件的拖拽功能并没有处理这些细节,经过翻阅 jquery ui 的源码才找到答案。
拖拽实现
关于拖拽功能不再啰嗦,直接贴代码
/** * draggable 拖拽方法 * @param {type} modal - 移动元素 * @param {type} handle - 可拖拽区域 */ var draggable = function(modal, handle) { var isDragging = false; var startX = 0, startY = 0, left = 0, top = 0; var dragStart = function(e) { var e = e || window.event; e.preventDefault(); isDragging = true; startX = e.clientX; startY = e.clientY; left = $(modal).offset().left; top = $(modal).offset().top; } var dragMove = function(e) { var e = e || window.event; e.preventDefault(); if (isDragging) { var endX = e.clientX, endY = e.clientY, relativeX = endX - startX, relativeY = endY - startY; $(modal).css({ left: relativeX + left + \'px\', top: relativeY + top + \'px\' }); } return false; } var dragEnd = function(e) { isDragging = false; } $(handle).on(\'mousedown\', dragStart); $(document).on(\'mousemove\', dragMove); $(document).on(\'mouseup\', dragEnd); }
使用方法
演示 Demo HTML
<div class="modal" id="modal"> <div class="modal-header"> <button class="btn-close"><i class="fa fa-times"></i></button> </div> <div class="modal-body"></div> </div>
演示 Demo CSS
.modal { position: fixed; top: 100px; left: 100px; width: 300px; border: 1px solid #aaa; padding: 3px; border-radius: 5px; } .modal-header { height: 24px; line-height: 24px; background-color: #ddd; color: #222; padding: 5px; border-radius: 3px; } .modal-body { height: 100px; } .btn-close { width: 24px; height: 24px; float: right; padding: 3px; }
演示 Demo JS
draggable(\'#modal\', \'#modal .modal-header\');
我们可以通过第二个参数指定不同的拖拽元素,比如可以指定整个 modal 为拖拽元素
draggable(\'#modal\',\'#modal\');
拖拽问题
整个拖拽功能并没有太大的问题,但是如果我们拖拽关闭按钮,仍然可以拖拽整个 modal,看起来不太和谐而且在某些情况下会影响功能,所以我们需要排除掉关闭按钮。
排除特定元素的方法
关于如何排除特定元素的方法,很多人会推荐阻止冒泡的方法,但是我试了很多次,这种方法是不行的,因为拖拽事件绑定在了 document
对象上。解决的方法就是在拖拽开始时添加限制条件,代码如下
... var dragStart = function(e) { var e = e || window.event; e.preventDefault(); // 获取需要排除的元素 var elemCancel = $(e.target).closest(element); // 如果拖拽的是排除元素,函数返回 if (elemCancel.length) { return true; } isDragging = true; startX = e.clientX; startY = e.clientY; left = $(modal).offset().left; top = $(modal).offset().top; } ...
为什么使用 closest()
方法呢?因为我们在排除特定元素的同时也要排除它的子元素。如果使用原生 JS 的话,需要添加获取子元素的方法。以下是完整代码:
/** * draggable 拖拽方法 * @param {type} modal - 移动元素 * @param {type} handle - 可拖拽区域 * @param {type} cancle - 需要排除的元素 */ var draggable = function(modal, handle, cancle) { var isDragging = false; var startX = 0, startY = 0, left = 0, top = 0; var dragStart = function(e) { var e = e || window.event; e.preventDefault(); // 获取需要排除的元素 var elemCancel = $(e.target).closest(cancle); // 如果拖拽的是排除元素,函数返回 if (elemCancel.length) { return true; } isDragging = true; startX = e.clientX; startY = e.clientY; left = $(modal).offset().left; top = $(modal).offset().top; } var dragMove = function(e) { var e = e || window.event; e.preventDefault(); if (isDragging) { var endX = e.clientX, endY = e.clientY, relativeX = endX - startX, relativeY = endY - startY; $(modal).css({ left: relativeX + left + \'px\', top: relativeY + top + \'px\' }); } return false; } var dragEnd = function(e) { isDragging = false; } $(handle).on(\'mousedown\', dragStart); $(document).on(\'mousemove\', dragMove); $(document).on(\'mouseup\', dragEnd); }
上面的案例的 JS 修改如下:
draggable(\'#modal\',\'#modal .modal-header\', \'#modal .btn-close\');
总结
其实这个拖拽案例算是 jquery ui 拖拽功能的简单实现。仍然是之前的老话,实现一个功能并不困难,但是如果要把这个功能做好,我们需要考虑很多的细节,或许很多时候我们都把时间花费在调整细节上了。
以上是关于大家帮忙解决下这个关于MFC的拖拽文件问题的主要内容,如果未能解决你的问题,请参考以下文章
Oracle VM VirtualBox 怎么实现虚拟机和主机之间文件的拖拽?
MFC 关于showwindow函数的用法。。。有图,帮忙解决下!