4. 单向拖拽和排序(put,sort) 

 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: {
80                 name: 'shared',
81                 pull: 'clone',
82                 put: false, // 设置为false , 不允许拖拽到这个列表中，但是可以对自己进行拖拽排序,前提时没有sort
83             },
84             animation: 150,
85             sort: false, // 设置为false, 禁止排序, 可以把B中的列表拖到A，但是不允许A列表对自己进行排序，拖拽,前提是没有put
86         })
87         
88         new Sortable(el2, {
89             group: {
90                 name: 'shared',
91             },
92             animation: 150
93         })
94         
95         
96     </script>
97 </body>
98 </html>

 

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