HTML5拖动元素放到指定位置
来源：互联网 发布：网络答题成绩单系统 编辑：程序博客网 时间：2024/06/05 15:40
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#box{width: 300px;height: 200px;border: 1px solid #000;}#img{width: 150px;height: 100px;}</style><script type="text/javascript">window.onload=function(){function start(ev){ev.dataTransfer.setData("Text",ev.target.id);//设置数据类型为（“Text”）和ID}function stop(ev){ev.preventDefault();//阻止元素发生默认行为var id=ev.dataTransfer.getData("Text");//获取数据类型对应的IDev.target.appendChild(document.getElementById(id));}function over(ev){ev.preventDefault();}var oBox=document.getElementById('box');var oImg=document.getElementById('img');oImg.ondragstart=function(ev){//要拖动的元素触发本函数start(ev);};oBox.ondragover=function(ev){//拖动过程中触发本函数over(ev);};oBox.ondrop=function(ev){//拖动结束时触发本函数stop(ev);};};</script></head><body><div id="box"></div><img src="../img/zly6.jpg" draggable="true" id="img" /></body></html>
1 0
