5. 指定某个元素才能拖拽 

  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">
 67 
 68                     <span class="handle"
 69                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 70 
 71                     item2
 72 
 73                 </li>
 74                 <li class="list-group-item">
 75 
 76                     <span class="handle"
 77                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 78 
 79                     item2
 80 
 81                 </li>
 82 
 83                 <li class="list-group-item">
 84 
 85                     <span class="handle"
 86                         style="display: inline-block;width: 10px;height: 10px;background-color: #87CEEB;"></span>
 87 
 88                     item2
 89 
 90                 </li>
 91             </ul>
 92 
 93             <!-- <ul id="itxst2">
 94             <li class="list-group-item tinted">item1</li>
 95             <li class="list-group-item tinted">item2</li>
 96             <li class="list-group-item tinted">item3</li>
 97             <li class="list-group-item tinted">item4</li>
 98             <li class="list-group-item tinted">item5</li>
 99             <li class="list-group-item tinted">item6</li>
100             <li class="list-group-item tinted">item7</li>
101         </ul> -->
102         </div>
103 
104         <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
105         <script type="text/javascript">
106             const el = document.getElementById('itxst')
107 
108             new Sortable(el, {
109                 handle: '.handle', // 只有拖动带有这个类名的标签才能拖动这个元素
110                 animation: 150
111             })
112         </script>
113     </body>
114 </html>

 

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