一.效果展示 客户端程序拖拽是一个很常见的需求,对于QWidget程序来说,需要重写如图1这么几个方法,通过重写这几个方法的逻辑,我们就可以控制鼠标拖拽的逻辑,糟糕的是QDrag执行exec后是一个阻塞主事件循环的操作,这个时候除了拖拽界面外,其他界面不能响应鼠标事件.作者之前就有过这么一个需要主界面响应的需求,当时我是重写了如图2所示的接口,来模拟程序拖拽. 图1 QWidget拖拽接口 图2 QWidget鼠标事件 如图3所示是示例拖拽展示,界面上有3个大的EditText,相互之间可以进行

今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/details/50703704,在这个博文里面提到了this.scrollParent.scrollTop(),那么对这个位置进行断点调试.(当然最开始也尝试了一下注释了这个地方,并没什么用) 在这个处理过程中,我发现我得拖拽对象的scrollParent并不是想象中的直接上级,而是不知上了多少级的父

无重写函数实现单元格拖拽 缺点:需要额外设置一个记录拖拽起始行的私有成员变量和拖拽列的初始QList数据成员. 优点:无需重构函数,对于QT中信号和槽的灵活运用 信号和槽 // signal void cellPressed(int row, int column) // 传递拖拽起始行列 // slots void StartDrag(int row, int col) { if (col == LAYERFLDCOL) // 确保拖拽列为可拖拽列 { m_rowFrom= row; // 记

使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. HTML 我们在页面中放置一个拖拽区域#drop_area,即接收拖拽的区域,#preview用来预览拖拽上传的图片信息. <div id="drop_area">将图片拖拽到此区域</div> <div id="preview">&l

今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListView的某一个节点,从而将该子元素作为当前节点的子节点.第二个例子就是将ListView的某一项拖拽到另外一项上从而使两个子项位置互换,这两个例子的原理类似,实现细节上有所差别,下面就具体分析一下这些细节. DEMO1 一 示例截图 图一 示例一截图 二 重点原理分析             2.1

C# TreeView 拖拽节点到另一个容器Panel中简单实现 用了这么久C#拖拽功能一直没有用到也就没用过,今天因为项目需要,领导特地给我简单讲解了下拖拽功能,真是的大师讲解一点通啊.特地写一篇博客记录下,分享给大家!也方便以后自己查看. 1.拖拽功能分析 拖拽功能分析其实就三个字:选-->拖-->放  什么意思,请看下图 本图大概就是将左侧TreeView中的节点拖拽到右侧的Panel控件中,然后根据业务处理想要的效果 拖拽过程分为三步: 将左侧的TreeView的节点选中 拖拽选中的节

老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery File Uploader.FineUploader.Uploadify.Baidu Web Uploader 等等),功能都很强大,代码量一般也较大.当时心想,就这么个小功能,杀鸡焉用牛刀,用库的话还得熟悉它的用法,有的需要引入额外的库,纯Flash的不考虑,还是动手造个轮子得了,至少造过之后能

最近需要做一个投票活动,上传图片时需要拖拽.缩放来裁剪图片,vue的组件不少,不过自己动手才能丰衣足食,一味使用别人的组件实在难以进步,所以自己研究一番. 一.mouse.drag.touch傻傻分不清 mouse:pc端的鼠标按下.移动等事件 (1).mousedown:当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件.与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生.mousedown() 方法触发 mousedown 事件

今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script> <script language="JavaScript" type="text/javascript" src=&quo

无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的四边拖拽支持 自定义窗口最大化(位置/大小) 童鞋们在WPF开发过程中是否觉得默认的Style太丑,或者是由Balabala的一些原因,使你觉得重写一个“高大上”的Window来符合项目的UI要求(小明:“我们使用Telerik”  老师:“什么?你说你们使用第三方UI框架?滚出去!”)经过半天的努

为了吸引大家的注意力,先给大家看一张动图: 相信这种效果大家都见过吧?我第一次见到这样的效果时,心里也痒痒的,急于想实现这种功能,后来因为拖延症的问题,就一直没有去弄这件事.现在这段时间,工作比较轻闲,所以对自己几年 Android 生涯所运用的技术做一些总结与思考.拖拽这种功能正好可以形成一个主题.如题目所示,今天博文的目标就是介绍与分析 ViewDragHelper 这个类. 读者阅读本文后将会有如下收获: 1. 不借助于 ViewDragHelper 实现基本的拖拽效果. 2. 借助于 V

拖动元素到指定区域 拖放的同时传递数据 1. 安装 ng2-drag-drop npm install ng2-drag-drop --save 2. 模板中配置可拖拽元素 // drag.component.html <div> <a href="javascript:;" *ngFor="let item of sysData" draggable [dragData]="item" [dragScope]="'s

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

场景:工具栏上有很多图标(一个图标代表一种控件),可以左键按下图标,然后拖拽到设计区域创建一个个的控件. 实现:1.给工具栏上的图标添加MouseLeftDown和MouseMove事件,前者事件是为了告诉Move事件我的确按下了左键,同时也可以在MouseDown事件中初始化一些标识:在后者     中经过自己的逻辑判断,看看是否可以拖拽了(一般就是判断自己的标识,比如是否按下了左键,这样的判断),如果可以则加入如下代码: DragDrop.DoDragDrop(sourceControl,

偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mousedown事件,鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top,并且给拖拽标记赋值true,代表拖拽动作就绪.第二步是mousemove事件,此时动态获取鼠标的X轴和Y轴,然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果.第三步是mouseup事件,鼠标弹

效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,模拟Windows窗口点击置顶效果.演示地址:http://frontendcode.sinaapp.com/J-Lui/jQuery-jLdraggable-plugin/ js/jquery.jLdraggable.js: ;(function($){ $.fn.extend({ "j

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left}   ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left}   ui.item - 表示当前拖拽的元素   ui.placeholder - 占位符(如果有定义的话)   ui.sender

本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div> <button onclick="xhr2()">ajax上传</button> 2.禁止浏览器打开文件行为 do

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Portlets</title> <script src="jquery-1.6.2.js"></script> <script src="jquery.u

基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true)默认dragX true/false false水平方向不可拖拽 (true)默认dragY true/false false垂直方向不可拖拽 (true)默认area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动callback 拖拽过程中的回调函数}); /** *

拖拽效果 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗拖拽</title> <style> *{margin:0;padding:0;} .box{position: absolute;width: 400px;height: 300px;top:100px;left: