2.两个列表互相交换位置 

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>拖拽</title>
 8     <style type="text/css">
 9         html, body {
10             height: 100%;
11             background-color: pink;
12             margin: 0;
13         }
14         
15         .row {
16             display: flex;
17             justify-content: space-around;
18         }
19         
20         ul {
21             width: 40%;
22             list-style-type: none;
23             padding: 0;
24         }
25         
26         #itxst > li {
27             padding: 10px 0;
28             margin-bottom: 2px;
29         }
30         
31         .list-group-item {
32             background-color: white;
33         }
34         
35         #itxst2 > li {
36             padding: 10px 0;
37             margin-bottom: 2px;
38         }
39         
40         .tinted {
41             background-color: yellow;
42         }
43         
44         .blue-background-class {
45             background-color: skyblue;
46         }
47     </style>
48 </head>
49 <body>
50     <div class="row">
51         <ul id="itxst">
52             <li class="list-group-item">item1</li>
53             <li class="list-group-item">item2</li>
54             <li class="list-group-item">item3</li>
55             <li class="list-group-item">item4</li>
56             <li class="list-group-item">item5</li>
57             <li class="list-group-item">item6</li>
58             <li class="list-group-item">item7</li>
59         </ul>
60         
61         <ul id="itxst2">
62             <li class="list-group-item tinted">item1</li>
63             <li class="list-group-item tinted">item2</li>
64             <li class="list-group-item tinted">item3</li>
65             <li class="list-group-item tinted">item4</li>
66             <li class="list-group-item tinted">item5</li>
67             <li class="list-group-item tinted">item6</li>
68             <li class="list-group-item tinted">item7</li>
69         </ul>
70     </div>
71     
72     <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
73     <script type="text/javascript">
74         
75         const el = document.getElementById('itxst')
76         const el2 = document.getElementById(('itxst2'))
77 
78         new Sortable(el, {
79             group: 'shared', // 将两个列表设置为相同的组
80             animation: 150
81         })
82         
83         new Sortable(el2, {
84             group: 'shared', // 将两个列表设置为相同的组
85             animation: 150
86         })
87         
88         
89     </script>
90 </body>
91 </html>

 

posted @ 2022-03-15 11:36  sky-su  阅读(107)  评论(0)    收藏  举报