h5-17-元素拖放
2017-08-04 11:09
127 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 400px; height: 200px; border: 1px solid red; margin-bottom: 20px; } #div2 { width: 400px; height: 200px; border: 1px solid blue; margin-bottom: 20px; } </style> </head> <body> <div id="div1" ondragover="dragover(event);" ondrop="drop(event);"></div> <div id="div2" ondragover="dragover(event);" ondrop="drop(event);"></div> <img id="img1" src="img/user7.jpg" draggable="true" ondragstart="dragstart(event)"/> <img id="img2" src="img/user10.jpg" draggable="true" ondragstart="dragstart(event)"/> <script> /*当开始拖动元素*/ function dragstart(e) { console.log(e.target.id + '拖动开始'); //在事件对象中存储被拖动元素的id e.dataTransfer.setData('objId',e.target.id); } /*当元素被拖动到当前元素中*/ function dragover(e) { console.log(e.target.id + ':dragover'); //阻止默认行为(,默认行为就是不让鼠标释放元素到这里) e.preventDefault(); } /*当元素被释放到当前元素中事件*/ function drop(e) { console.log(e.target.id + ':drop'); //阻止默认行为 e.preventDefault(); //获得当前被拖动元素的id var id = e.dataTransfer.getData('objId'); //获得被拖动元素的对象 var obj = document.getElementById(id); //在当前元素中插入被拖动元素 if (e.target.nodeName == 'DIV') e.target.appendChild(obj); } </script> </body> </html>
相关文章推荐
- H5 61-浮动元素贴靠现象
- jQuery17(html,attr,removeAttr,动态创建元素)
- Html 5:如何在两个 <div> 元素之间拖放图像
- 17 H5里的i2c控制器驱动
- H5--主体元素结构与非主题元素结构
- 17.元素分类
- H5 新增的input元素的类型
- HTML5元素拖放
- Html5 Canvas 系列_绘图三(H5 拖放组件)
- /*将数组{17,82,-4,55}和数组{34,11,66,56,76}合并放入一个数组中,然后 对其中的元素进行排序。按从大到小排序。*/
- 为您解惑:H5语义元素..........
- h5增强的页面元素
- selenium webdriver学习(十)-怎么把一个元素拖放到另一个元素里面
- H5 62-浮动元素字围现象
- H5页面属性和元素
- h5新定义的块级元素
- H5常用的标签元素
- H5特性 MutationObserver 监听元素 动态改变iframe高度
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
- Html5实现如何在两个div元素之间拖放图像