1.基本拖拽 

 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         ul {
15             list-style-type: none;
16             padding: 0;
17         }
18         ul > li {
19             padding: 10px 0;
20             background-color: white;
21             margin-bottom: 2px;
22             /* border-bottom: 1px solid #444444; */
23         }
24         .blue-background-class {
25             background-color: skyblue;
26         }
27     </style>
28 </head>
29 <body>
30     <ul id="itxst">
31         <li>item1</li>
32         <li>item2</li>
33         <li>item3</li>
34         <li>item4</li>
35         <li>item5</li>
36         <li>item6</li>
37         <li>item7</li>
38     </ul>
39     
40     <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
41     <script type="text/javascript">
42         
43         const el = document.getElementById('itxst')
44 
45         new Sortable(el, {
46             animation: 150, // 单位是毫秒(ms)，在排序移动时的动画速度，"0" 表示没有动画
47             ghostClass: 'blue-background-class', // 在拖动时赋予了拖动列表组件类名
48         })
49         
50         
51     </script>
52 </body>
53 </html>

 

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