HTML5下DOM元素在窗口中拖动(更改位置)
来源:互联网 发布:类似商务通的软件 编辑:程序博客网 时间:2024/06/05 06:29
在非H5浏览器中,要想在窗口中靠鼠标移动DOM元素位置,需要在mousedown事件中记录鼠标和被拖动DOM的位置信息,在mousemove中呈现移动效果,然后在mouseup中改变最终位置。而在H5中省事了很多,利用dragable属性和drop事件很容易就做到:
.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);
0 0
- HTML5下DOM元素在窗口中拖动(更改位置)
- HTML5拖动元素放到指定位置
- 在浏览器中禁止拖动页面的元素或者拖动图片打开新的窗口
- 元素在窗口中的位置
- 元素只能在固定窗口内拖动
- (MFC)在任意位置拖动窗口或弹出窗口菜单
- 如何拖动DOM元素
- 原生javascript实现鼠标在窗口按下拖动,元素放大效果。
- 任意位置拖动窗口
- html5元素拖动
- html5元素拖动
- HTML5 元素拖动
- 在DOM中搜索元素
- 让元素在网页中可拖动
- 自定义窗口大小并且让定义在自定义窗口的什么位置显示,窗口可以拖动。
- C#窗口任意位置拖动
- 利用HTML5的drop、drag及拖动属性做元素位置交换《我是学霸》
- js在html特定位置添加dom元素
- angular表格带筛选分页,本地json
- Android 自定义密码框,密码+确认密码
- 解决Cocos2d点击电源键后游戏纹理失效
- js/jquery(2)
- Maven与jetty问题集锦
- HTML5下DOM元素在窗口中拖动(更改位置)
- Java杨辉三角的打印
- 正则表达式学习笔记
- Android的OnTouch事件的处理机制
- GTest使用
- js浅copy和深copy
- 完成用户列表Demo,使用plist当数据源,在TableView中显示plist的内容
- 微信营销最重要的环节大部分人都忽略了
- 食物链