<!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则拖拽不成功
转载于:https://www.cnblogs.com/ys15/p/10704972.html
相关资源：listbox之间拖拽，listbox内元素拖拽排序
