<!DOCTYPE html>
<html>
<head>
<style>
.row div {
float: left;
}
#div1, #div2 {
width: 100px;
height: 100px;
margin-left: 100px;
}
img {
width: 100px;
height: 100px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
var srcdiv = null;
var temp = null;
//当拖动时触发
function drag(ev, divdom) {
srcdiv = divdom;
temp = divdom.innerHTML;
debugger
}
//当拖动完后触发
function drop(ev, divdom) {
ev.preventDefault();
if (srcdiv !== divdom) {
srcdiv.innerHTML = divdom.innerHTML;
divdom.innerHTML = temp;
}
}
</script>
</head>
<body>
<div class="row">
<div id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
<p>ni hao!</p>
<img src="314253.jpg" alt="" />
</div>
<div id="div2" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
<p>Hello world!</p>
<img src="321924.jpg" alt="" />
</div>
</div>
</body>
</html>