HTML5下DOM元素在窗口中拖动(更改位置)
2015-12-08 16:46
603 查看
在非H5浏览器中,要想在窗口中靠鼠标移动DOM元素位置,需要在mousedown事件中记录鼠标和被拖动DOM的位置信息,在mousemove中呈现移动效果,然后在mouseup中改变最终位置。而在H5中省事了很多,利用dragable属性和drop事件很容易就做到:
HTML:
script:
.divblok { background-color:rgba(172,16,172,0.5); width:200px; height:100px; position:absolute; left:20px; top:20px; }
HTML:
<div style="width:600px;height:400px;border:1px solid red;"></div> <div id="dragdiv" draggable="true" class="divblok">我要移动 </div>
script:
var dragdiv = document.querySelector('#dragdiv'); var x, y; //记录到点击时鼠标到移动框左边和上边的距离 dragdiv.addEventListener('dragstart', function (e) { e.dataTransfer.effectAllowed = "move"; //移动效果 e.dataTransfer.setData("text", ''); //附加数据, 没有这一项,firefox中无法移动 x = e.offsetX || e.layerX; y = e.offsetY || e.layerY; return true; }, false); document.addEventListener('dragover', function (e) {//取消冒泡 ,不取消则不能触发 drop事件 e.preventDefault()|| e.stopPropagation(); }, false); document.addEventListener('drop', function (e) { dragdiv.style.left = (e.pageX - x) + 'px'; dragdiv.style.top = (e.pageY - y) + 'px'; e.preventDefault() || e.stopPropagation(); //不取消,firefox中会触发网页跳转到查找setData中的内容 }, false);
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- jQuery+HTML5加入购物车代码分享
- 基于Jquery和html5的7款个性化地图插件
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5使用DeviceOrientation实现摇一摇功能
- 使用HTML5中postMessage知识点解决Ajax中POST跨域问题
- MVC中基于Ajax和HTML5实现文件上传功能
- jquery+html5烂漫爱心表白动画代码分享
- spring+html5实现安全传输随机数字密码键盘