dos

Public/static/js/common.js

@@ -172,6 +172,7 @@ $(document).ready(function () {
     // $('.logo').css('top',getTranslateDistance(15));
 
     $('.flag-list-content').attr('id', 'flag-list-content');
+    const colorbarLeft = $('.colorbar').offset().left;
     new Sortable(document.getElementById('flag-list-content'), {
         animation: 150,
         ghostClass: 'flag-sortable-ghost',
@@ -213,7 +214,7 @@ $(document).ready(function () {
     //选择色条触摸开始
     $('.personal-page .colorbar').on('touchstart', chooseColorStart);
     //选择色条拖动
-    $('.personal-page .btn-choose-color').on('touchmove', chooseColorMove);
+    $('.personal-page .colorbar').on('touchmove', chooseColorMove);
     //红色
     $('.personal-page .btn-red').on('click', {
         color: 'red',
@@ -303,9 +304,7 @@ function changeMainColor(event) {
 
 function chooseColorStart(e) {
     let touch = e.originalEvent.targetTouches[0];
-    console.log(touch);
-
-    startX = touch.pageX / fontSize;
+    startX = (touch.pageX - colorbarLeft) / fontSize;
 }
 
 function chooseColorMove(e) {
@@ -315,36 +314,31 @@ function chooseColorMove(e) {
     }
     timer = setTimeout(() => {
         let touch = e.originalEvent.targetTouches[0];
-        moveX = touch.pageX / fontSize;
-
-
-        let left = parseFloat($('.personal-page .btn-choose-color').css('left')) / fontSize;
-        left = left + (moveX - startX);
+        moveX = (touch.pageX - colorbarLeft) / fontSize;
 
-        if (left < 4.2916) {
-            left = 4.2916;
-        } else if (left > 26.62) {
-            left = 26.62;
+        if (moveX < 4.2916) {
+            moveX = 4.2916;
+        } else if (moveX > 26.62) {
+            moveX = 26.62;
         }
 
-        if (left < 6.59) {
+        if (moveX < 6.59) {
             colorIndex = 1;
-        } else if (left > 6.59 && left < 11) {
+        } else if (moveX > 6.59 && moveX < 11) {
             colorIndex = 2;
-        } else if (left > 11 && left < 15.46) {
+        } else if (moveX > 11 && lefmoveXt < 15.46) {
             colorIndex = 3;
-        } else if (left > 15.46 && left < 19.91) {
+        } else if (moveX > 15.46 && moveX < 19.91) {
             colorIndex = 4;
-        } else if (left > 19.91 && left < 24.38) {
+        } else if (moveX > 19.91 && moveX < 24.38) {
             colorIndex = 5;
-        } else if (left > 24.38) {
+        } else if (moveX > 24.38) {
             colorIndex = 6;
         }
 
         $('.personal-page').css('background', colorList[mainColor][colorIndex - 1]);
 
-        $('.personal-page .btn-choose-color').css('left', left + 'rem');
-        startX = moveX;
+        $('.personal-page .btn-choose-color').css('left', moveX + 'rem');
     }, 5);
 }