使用jQuery进行两个div的交换以及数据交换

老师上课讲了对于两个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 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 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     </style>
22     <script>
23         window.onload=function(event)
24         {
25             var top=document.getElementById("top");
26             var bottom=document.getElementById("bottom");
27             top.ondragstart=function(event)
28             {
29                 var data=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                 var data=event.dataTransfer;
45                 var id=data.getData("id");
46                 var top=document.getElementById(id);
47                 var topText=top.innerHTML;
48                 var bottomText=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                 var data=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                 var data=event.dataTransfer;
76                 var id=data.getData("id");
77                 var top=document.getElementById(id);
78                 var topText=top.innerHTML;
79                 var bottomText=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     </script>
90 </head>
91 <body>
92     <div id="top" draggable="true">
93        <h1>hello</h1> 
94     </div>
95     <div id="bottom" draggable="true">
96         <h3>world</h3>
97     </div>
98 </body>
99 </html>

当然，这个代码还是需要更加精简。