h5拖放1

来源：互联网发布：java 数组去重效率编辑：程序博客网时间：2024/05/18 22:47
02drag img.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style type="text/css">#box{width: 500px;height: 500px;margin: 20px auto;background: pink;}</style><body><div id="box"></div><img src="images/1.jpg" id="img"  /></body><script type="text/javascript">//1.获取元素var img = document.getElementById('img');var box = document.getElementById('box');//一共是三个事件  ondragstart 开始拖放 给被拖放的元素  ondragover拖放悬停在某个元素身上  给大盒子// ondrop 放置（松开鼠标）  给目标盒子//2.添加拖放开始事件img.ondragstart = function(e){//3.通过event对象保存被拖放元素的数据  ，保存被拖放元素的IDe.dataTransfer.setData('id',this.id);}//4.给目标盒子添加拖放悬停事件    box.ondragover = function(e){//5.通过event对象要阻止浏览器默认行为e.preventDefault();}//6.添加投放事件（鼠标松开）box.ondrop = function(e){//7.通过event对象获取之前保存的ID数据var id = e.dataTransfer.getData('id');//8.通过这个ID找到对应的元素var elem = document.getElementById(id);console.log(elem);//9.把这个被拖放的元素 插入到当前这个盒子里面this.appendChild(elem);}</script></html>
0 0