这篇博客展示了如何使用JavaScript实现两个div元素的拖拽交互功能，允许用户通过拖拽来改变div的顺序。通过设置`ondragstart`、`ondrop`和`ondragover`事件监听器，实现了元素的拖放操作。示例中，两个具有不同背景颜色的div可以被拖动并交换其内容。
<!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;
line-height:35px;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
var srcdiv = null;
var temp = null;
function drag(ev, divdom) {
srcdiv = divdom;
temp &
<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;
line-height:35px;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
var srcdiv = null;
var temp = null;
function drag(ev, divdom) {
srcdiv = divdom;
temp &
最低0.47元/天 解锁文章
690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
