7. 交换排序的阈值(swapThreshold) 

  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,
 10             body {
 11                 height: 100%;
 12                 background-color: pink;
 13                 margin: 0;
 14             }
 15 
 16             .row {
 17                 display: flex;
 18                 justify-content: space-around;
 19             }
 20 
 21             ul {
 22                 width: 40%;
 23                 list-style-type: none;
 24                 padding: 0;
 25             }
 26 
 27             #itxst>li {
 28                 padding: 10px 0;
 29                 margin-bottom: 2px;
 30             }
 31 
 32             .list-group-item {
 33                 background-color: white;
 34             }
 35 
 36             #itxst2>li {
 37                 padding: 10px 0;
 38                 margin-bottom: 2px;
 39             }
 40 
 41             .tinted {
 42                 background-color: yellow;
 43             }
 44 
 45             .blue-background-class {
 46                 background-color: skyblue;
 47             }
 48         </style>
 49     </head>
 50     <body>
 51         <div class="row">
 52             <ul id="itxst">
 53                 <li class="list-group-item">
 54                     <span class="handle"
 55                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 56                     item2
 57                 </li>
 58                 <li class="list-group-item">
 59 
 60                     <span class="handle"
 61                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 62 
 63                     item2
 64 
 65                 </li>
 66                 <li class="list-group-item filtered" style="background-color: red;">
 67 
 68                     <span class="handle"
 69                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 70 
 71                     item2
 72                 </li>
 73                 <li class="list-group-item">
 74                     <span class="handle"
 75                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 76                     item2
 77                 </li>
 78 
 79                 <li class="list-group-item">
 80                     <span class="handle"
 81                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 82                     item2
 83                 </li>
 84             </ul>
 85 
 86             <ul id="itxst2">
 87                 <li class="list-group-item tinted">item1</li>
 88                 <li class="list-group-item tinted">item2</li>
 89                 <li class="list-group-item tinted">item3</li>
 90                 <li class="list-group-item tinted">item4</li>
 91                 <li class="list-group-item tinted">item5</li>
 92                 <li class="list-group-item tinted">item6</li>
 93                 <li class="list-group-item tinted">item7</li>
 94             </ul>
 95         </div>
 96 
 97         <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
 98         <script type="text/javascript">
 99             const el = document.getElementById('itxst')
100             const el2 = document.getElementById('itxst2')
101 
102             new Sortable(el, {
103                 group: 'shar',
104                 swapThreshold: 0, // 交换排序的阈值，如果阈值为0，A可以把组件拖拽到B，但是B的组件不可以拖拽到A
105                 invertSwap: true, // 如果设置为true，将始终使用反向交换区，不懂什么意思
106                 animation: 150
107             })
108 
109             new Sortable(el2, {
110                 group: 'shar',
111                 animation: 150
112             })
113         </script>
114     </body>
115 </html>

 

posted @ 2022-03-15 12:05  sky-su  阅读(177)  评论(0)    收藏  举报