转自:https://blog.csdn.net/shahuangtiao6640/article/details/78401041
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)" style="background-color:#ff6a00;">
<p>我是第一!</p>
</div>
<div id="div2" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)" style="background-color:#00ff21;">
<p>那我第二。</p>
</div>
</body>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
var sourceDiv = null;
function drag(ev, self) {
sourceDiv = self;
}
function drop(ev, self) {
ev.preventDefault();
if (sourceDiv != self) {
var tmpHtml = sourceDiv.innerHTML;
sourceDiv.innerHTML = self.innerHTML;
self.innerHTML = tmpHtml;
}
}
</script>
</html>