1

ipad/index (1).html

@@ -7,7 +7,6 @@
     <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 {
@@ -43,7 +42,7 @@
         <div data-id="4农业银行">农业银行</div>
         <div data-id="5交通银行">交通银行</div>
     </div>
-	<div id="wrapBox1">
+	<!-- <div id="wrapBox1">
         <div data-id="6工商银行">工商银行</div>
         <div>123</div>
         <div data-id="7建设银行">建设银行</div>
@@ -52,13 +51,14 @@
         <div data-id="8中国银行">中国银行</div>
         <div data-id="9农业银行">农业银行</div>
         <div data-id="10交通银行">交通银行</div>
-    </div>
+    </div> -->
     <script>
         //第一步，获取拖动容器
         var wrap = document.getElementById('wrapBox');
         //第二步，设置拖动项的拖动规则
         var rules = {
 			group: 'shared', 
+			swap: true,
             animation: 500, // 拖动时的元素的位置变化的动画时长，
             //拖动结束后的回调函数
             onEnd: function (event) {
@@ -75,23 +75,23 @@
         //第三步，初始化 --> 给拖动容器添加拖动规则 
         var sortable = Sortable.create(wrap, rules);
 
-		 //第一步，获取拖动容器
+		//  //第一步，获取拖动容器
-		 var wrap1 = document.getElementById('wrapBox1');
+		//  var wrap1 = document.getElementById('wrapBox1');
-        //第二步，设置拖动项的拖动规则
+        // //第二步，设置拖动项的拖动规则
-        var rules1 = {
+        // var rules1 = {
-			group: 'shared', 
+		// 	group: 'shared', 
-			filter: ".ignore-elements",  // 过滤器，不需要进行拖动的元素
+		// 	filter: ".ignore-elements",  // 过滤器，不需要进行拖动的元素
-            animation: 500, // 拖动时的元素的位置变化的动画时长，
+        //     animation: 500, // 拖动时的元素的位置变化的动画时长，
-            //拖动结束后的回调函数
+        //     //拖动结束后的回调函数
-            onEnd: function (event) {
+        //     onEnd: function (event) {
-                console.log('参数是拖动事件对象', event);
+        //         console.log('参数是拖动事件对象', event);
-                //获取拖动后容器中的每一项的位置排序
+        //         //获取拖动后容器中的每一项的位置排序
-                var arr = sortable.toArray();
+        //         var arr = sortable.toArray();
-                console.log('位置排序', arr);
+        //         console.log('位置排序', arr);
-            },
+        //     },
-        };
+        // };
-        //第三步，初始化 --> 给拖动容器添加拖动规则 
+        // //第三步，初始化 --> 给拖动容器添加拖动规则 
-        var sortable1 = Sortable.create(wrap1, rules1);
+        // var sortable1 = Sortable.create(wrap1, rules1);
         /**
          * 插件自带的方法：
          *      1. sortable.toArray() 获取序列化后的每个item元素的id属性的数组

ipad/js/monitor.js

@@ -23,6 +23,7 @@ $(function(){
     //第二步，设置拖动项的拖动规则
     let rules = {
         animation: 500,
+        swap: true,
         //拖动结束后的回调函数
         onEnd: function (event) {
             console.log('参数是拖动事件对象', event);