老师上课讲了对于两个div进行交换的例子，只能交换一次，在课后，我进行了“两个div可以交换多次”的研究

对于两个div，一个红色100px，一个蓝色200px.使用拖拽功能可以进行交换

div样式在style中，使用dragstart，dragover，drop进行绑定事件

dragstart事件的定义如下：

top.ondragstart=function(event)

{

var data=event.dataTransfer;

data.setData("id",this.id);

data.effectAllowed='link';

}

dragover事件定义如下：

bottom.ondragover=function(event)

{

event.preventDefault();

event.dataTransfer.dropEffect='';

}

drop事件定义如下：

bottom.ondrop=function(event)

{

var data=event.dataTransfer;

var id=data.getData("id");

var top=document.getElementById(id);

var topText=top.innerHTML;

var bottomText=this.innerHTML;

top.innerHTML=bottomText;

this.innerHTML=topText;

this.parentNode.replaceChild(this,top);

this.parentNode.appendChild(top);

}

注意需要拖拽top，bottom，需要添加属性draggable="true"。

要将对象分清。

思路：使用datatransfer将id传到drop中，然后进行交换。使用replaceChild(要替换的元素，替换元素)，appendChild()进行交换

完整代码如下：

1

2

3

4

5

6

Document

7

8 div#top{

9 width:100px;

10 height:100px;

11 background-color:red;

12 }

13 div#bottom{

14 width:200px;

15 height:200px;

16 background-color:blue;

17 }

18 div{

19 margin:20px;

20 }

21

22

23 window.onload=function(event)24 {25 vartop=document.getElementById("top");26 varbottom=document.getElementById("bottom");27 top.ondragstart=function(event)28 {29 vardata=event.dataTransfer;30 data.setData("id",this.id);31

32

33 data.effectAllowed='link';34

35 }36 bottom.ondragover=function(event)37 {38 event.preventDefault();39 event.dataTransfer.dropEffect='';40

41 }42 bottom.ondrop=function(event)43 {44 vardata=event.dataTransfer;45 varid=data.getData("id");46 vartop=document.getElementById(id);47 vartopText=top.innerHTML;48 varbottomText=this.innerHTML;49

50

51 top.innerHTML=bottomText;52 this.innerHTML=topText;53 this.parentNode.replaceChild(this,top);54 this.parentNode.appendChild(top);55 }56

57

58 bottom.ondragstart=function(event)59 {60 vardata=event.dataTransfer;61 data.setData("id",this.id);62

63

64 data.effectAllowed='link';65

66 }67 top.ondragover=function(event)68 {69 event.preventDefault();70 event.dataTransfer.dropEffect='';71

72 }73 top.ondrop=function(event)74 {75 vardata=event.dataTransfer;76 varid=data.getData("id");77 vartop=document.getElementById(id);78 vartopText=top.innerHTML;79 varbottomText=this.innerHTML;80

81

82 top.innerHTML=bottomText;83 this.innerHTML=topText;84 this.parentNode.replaceChild(this,top);85 this.parentNode.appendChild(top);86 }87

88 }89

90

91

92

93

hello

94