1

ipad/css/monitor.css

@@ -16,8 +16,32 @@ body,html{
     width: calc(100% - 2px);
     border:1px solid red;
     background-color: #fff;
+    position: relative;
     /* padding:20px; */
 }
+.order{
+    position: absolute;
+    border:2px solid #000;
+    bottom: 0;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+}
+.order .orderItem{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 5%;
+    border: 1px solid red;
+}
+.order .orderItem span{
+    margin-bottom: 7px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 22px;
+    color: #222222;
+}
+
 #top1 {
     display: flex;
     flex-wrap: wrap;

ipad/index (1).html

@@ -7,6 +7,7 @@
     <meta name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <!-- 引入插件 -->
+     <script src="./js/jquery-3.7.1.min.js"></script>
     <script src="./js/Sortable.min.js"></script>
     <style>
         #wrapBox {

ipad/js/monitor.js

@@ -11,7 +11,6 @@ $(function(){
     }
     // 编辑弹窗
     $("#setTask").click(()=>{
-       
         // 淡入元素
         $("#editDialog").fadeIn();
     })
@@ -27,10 +26,12 @@ $(function(){
         //拖动结束后的回调函数
         onEnd: function (event) {
             console.log('参数是拖动事件对象', event);
+            // 交换
+            console.log($("#top1"))
             //获取拖动后容器中的每一项的位置排序
-            var arr = sortable.toArray();
+            // var arr = sortable.toArray();
-            console.log('位置排序', arr);
+            // console.log('位置排序', arr);
-        },
+        }
     };
     //第三步，初始化 --> 给拖动容器添加拖动规则 
     let sortable = Sortable.create(wrap, rules);

ipad/monitor.html

@@ -19,27 +19,27 @@
             </div>
             <div data-id="car2" class="carInfo">
                 <img src="./images/car2.png" alt="">
-                <span>XG031</span>
+                <span>XG032</span>
             </div>
             <div data-id="car3" class="carInfo">
                 <img src="./images/car3.png" alt="">
-                <span>XG031</span>
+                <span>XG033</span>
             </div>
             <div data-id="car4" class="carInfo">
                 <img src="./images/car4.png" alt="">
-                <span>XG031</span>
+                <span>XG034</span>
             </div>
             <div data-id="car5" class="carInfo">
                 <img src="./images/car5.png" alt="">
-                <span>XG031</span>
+                <span>XG035</span>
             </div>
             <div data-id="car6" class="carInfo">
                 <img src="./images/car6.png" alt="">
-                <span>XG031</span>
+                <span>XG036</span>
             </div>
             <div data-id="car7" class="carInfo">
                 <img src="./images/car6.png" alt="">
-                <span>XG031</span>
+                <span>XG037</span>
             </div>
             <div data-id="empty1" class="empty"></div>
             <div data-id="empty2" class="empty"></div>
@@ -49,6 +49,32 @@
             <div data-id="empty6" class="empty"></div>
             <div data-id="empty7" class="empty"></div>
         </div>
+        <div class="order">
+            <div class="orderItem" style="margin-left:12.5%">
+                <span>2.5</span>
+                <img src="./images/jiantou.png" alt="">
+            </div>
+            <div class="orderItem">
+                <span>3.1</span>
+                <img src="./images/jiantou.png" alt="">
+            </div>
+            <div class="orderItem">
+                <span>2.6</span>
+                <img src="./images/jiantou.png" alt="">
+            </div>
+            <div class="orderItem">
+                <span>2.3</span>
+                <img src="./images/jiantou.png" alt="">
+            </div>
+            <div class="orderItem">
+                <span>3.2</span>
+                <img src="./images/jiantou.png" alt="">
+            </div>
+            <div class="orderItem">
+                <span>2.2</span>
+                <img src="./images/jiantou.png" alt="">
+            </div>
+        </div>
     </section>
     <section class="bottom">
         <div class="left">
@@ -106,7 +132,7 @@
                     </div>
                     <div class="pic">
                         <img src="./images/car2.png" alt="">
-                        <span>XG031</span>
+                        <span>XG032</span>
                     </div>
                     <img src="./images/t2.png" alt="" class="temp">
                     <div class="tempNum">130℃</div>
@@ -118,7 +144,7 @@
                     </div>
                     <div class="pic">
                         <img src="./images/car3.png" alt="">
-                        <span>XG031</span>
+                        <span>XG033</span>
                     </div>
                     <img src="./images/t3.png" alt="" class="temp">
                     <div class="tempNum">180℃</div>
@@ -130,7 +156,7 @@
                     </div>
                     <div class="pic">
                         <img src="./images/car4.png" alt="">
-                        <span>XG031</span>
+                        <span>XG034</span>
                     </div>
                     <img src="./images/t4.png" alt="" class="temp">
                     <div class="tempNum">210℃</div>
@@ -142,7 +168,7 @@
                     </div>
                     <div class="pic">
                         <img src="./images/car5.png" alt="">
-                        <span>XG031</span>
+                        <span>XG035</span>
                     </div>
                     <img src="./images/t5.png" alt="" class="temp">
                     <div class="tempNum">220℃</div>
@@ -154,7 +180,7 @@
                     </div>
                     <div class="pic">
                         <img src="./images/car6.png" alt="">
-                        <span>XG031</span>
+                        <span>XG036</span>
                     </div>
                     <img src="./images/t6.png" alt="" class="temp">
                     <div class="tempNum">260℃</div>
@@ -166,7 +192,7 @@
                     </div>
                     <div class="pic">
                         <img src="./images/car6.png" alt="">
-                        <span>XG031</span>
+                        <span>XG037</span>
                     </div>
                     <img src="./images/t7.png" alt="" class="temp">
                     <div class="tempNum">500℃</div>