开心截图，拖拽大作战

加这个div, up 事件就必须绑定给document ,否则会出现问题！

版本2 ：

版本3 ：

是正按下ctrl + a 再拖动的时候，会出现，抖影子

这个解决办法，也是有兼容问题，我就不写了，直接截图过来！

/** 提取一个专门用来设置拖拽的函数* 参数：开启拖拽的元素*/function drag(obj){//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownobj.onmousedown = function(event){//设置box1捕获所有鼠标按下的事件/** setCapture()*   - 只有IE支持，但是在火狐中调用时不会报错，*      而如果使用chrome调用，会报错*//*if(box1.setCapture){box1.setCapture();}*/obj.setCapture && obj.setCapture();event = event || window.event;//div的偏移量 鼠标.clentX - 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event){event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置obj.style.left = left+"px";obj.style.top = top+"px";};//为document绑定一个鼠标松开事件document.onmouseup = function(){//当鼠标松开时，被拖拽元素固定在当前位置    onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//当鼠标松开时，取消对事件的捕获obj.releaseCapture && obj.releaseCapture();};/** 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，*     此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，*  如果不希望发生这个行为，则可以通过return false来取消默认行为* * 但是这招对IE8不起作用*/return false;};}

最后一个版本，好像就是加入，scrollTop scrollLeft!

至此拖拽就基本搞定了，谢谢大家阅读，祝大家学习愉快！开心生活！

开心截图，拖拽大作战相关推荐

Qt 可拖拽大小可调方框
Abstract 参考QGraphicItem, 拖拽窗口大小例子基本思路,结合公司项目需要,写出可以拖拽及调整大小的边框,并且边框内可以划分2x2或3x3网格效果图演示视频链接: https: ...
VisualDrag低代码拖拽模板
目录背景技术&文档二开优化方案 1. 优化侧边栏 2. 优化图片插入 3. 新增可插入画布的组件 4. 解决组件鼠标默认事件冲突的问题数据保存对接&页面生成预览保存对接生成 ...
【大屏项目】SpringBoot + Vue 实现的可视化拖拽编辑的
简介大屏设计(AJ-Report)是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具.内置的基础功能包括数据源,数据集,报表管理. 多数据源支持,内置mysql.elasticsea ...
SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
点击关注公众号,利用碎片时间学习来源:爪哇笔记简介大屏设计(AJ-Report)是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具.内置的基础功能包括数据源,数据集,报表管理. ...
基于 Spring Boot + Vue 实现的可视化拖拽编辑的大屏项目
大家好,今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目: 简介这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑 ...
基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
整理:抓哇笔记简介大屏设计(AJ-Report)是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具.内置的基础功能包括数据源,数据集,报表管理. 多数据源支持,内置mysql.el ...
html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
截图后粘贴或拖拽上传
在浏览器中使用截图工具截图后直接粘贴到页面上传,以及拖拽到页面标签区域上传主要使用了粘贴(paste)事件,以及拖拽(drag)事件,其中拖拽时要禁用浏览器的默认将图片打开的行为例子: HTML部 ...
[开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

开心截图，拖拽大作战

开心截图，拖拽大作战相关推荐

最新文章

热门文章