html5元素拖动

最新推荐文章于 2024-06-06 15:07:55 发布

焚膏油以继晷，恒兀兀以穷年

最新推荐文章于 2024-06-06 15:07:55 发布

阅读量299

点赞数

分类专栏： JavaScript/HTML5/CSS3

JavaScript/HTML5/CSS3 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid gray;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div οndrοp="drop3(this, event)" οndragοver="drag1(event)">

<img id="img1" οndragstart="drag2(event)" src="picture/08186795f6312a36.jpg" width="120" draggable="true" alt=""/>
</div>
<div οndrοp="drop3(this, event)" οndragοver="drag1(event)">

</div>

<script>
var imgid;
//将被拖动的元素放置到被释放的位置
function drop3(obj,ev){
// 阻止非IE冒泡
ev.stopPropagation();
//阻止IE冒泡
// ev.cancelBubble=true;
// 查询代码：阻止冒泡
obj.appendChild(document.getElementById(imgid));
}

function drag2(ev){
// ondragstart 事件在用户开始拖动元素或选择的文本时触发。
imgid=ev.target.id;//记录被拖动元素的属性id
}
function drag1(ev){
ev.preventDefault();//阻止默认操作,让外部元素可以被拖进去
}
</script>

</body>
</html>