<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div {
width: 500px;
}
.div1 {
float: left;
height: 200px;
width: 200px;
background: #8ab5eb;
}
.div2 {
float: right;
height: 200px;
width: 200px;
background: #8ab5eb;
}
</style>
</head>
<body>
<div class="div">
<div draggable="true" id="div1" class="div1">
<p id="pe" draggable="true">把我拖拽到右侧</p>
</div>
<div id="div2" draggable="true" class="div2">
</div>
</div>
<script>
var p = document.querySelector("#pe");
var div1 = document.querySelector("#div1");
document.οndragstart=function (e) {
e.dataTransfer.setData("text/html",e.target.id);
};
document.οndrοp=function(e){
var id= e.dataTransfer.getData("text/html");
e.target.appendChild(document.getElementById(id));
};
</script>
注意事项：
dataTransfer实现数据的存储于获取
通过ondragstart方法实现将数据的存储到dataTransfer中 e.dataTransfer.setDate("text/html",e.target.id)
通过获取只能在ondrop下面取值e.dataTransfer.getData("text/html")通过e.target.appendChild(document.getElementById)
实现此功能的必须要在需要拖拽的元素上加上一个属性 draggable="true"
以上代码被拖动的元素必须有id,没有id则拖拽不成功
扫一扫
1924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
