From f0e691f36053b55d5c687fc433cde3279703324a Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 1 Sep 2023 18:13:26 +0200
Subject: [PATCH] wip #6182 @7:00 question drag and drop

---
 js/quiz.screens.js                  | 54 ++++++++++++++++++++++++++++-
 style/106-question-draganddrop.sass | 25 +++++++++----
 views/index.blade.php               |  1 +
 3 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 39c15e6..c8c367e 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -66,13 +66,65 @@ QuizScreens.prototype = {
 
         let x = $(".list-item").offset().left
 
+        let zone1 = $(".zone-1 .zone-content")
+        let zone2 = $(".zone-2 .zone-content")
+        let widthList = $(".list-item").width()
+
         Draggable.create(".list-item", {
             type: "x,y",
             edgeResistance: 0.2,
             inertia: true,
             bounds: ".list",
+            liveSnap: {
+                //quiz.js:1328 393 333.5
+                points: {x: [393], y: [333.5]},
+                radius: 1
+            },
             onMove: function() {
-                console.log('ok')
+                let left = $(this.target).offset().left,
+                    right = $(this.target).offset().left + $(this.target).outerWidth(),
+                    direction = this.getDirection(),
+                    rotation = 0
+
+                //set rotation
+                if(direction.includes("right")) {
+                    rotation = 5
+                } else {
+                    rotation = -5
+                }
+
+                if(this.endX === 0) {
+                    rotation = 0
+                }
+
+                gsap.to(this.target, {
+                    rotation: rotation
+                })
+
+
+                //
+                if(left - 19 < zone1.offset().left + zone1.width()) {
+                    $(".zone-1").addClass("active")
+                } else {
+                    $(".zone-1").removeClass("active")
+                }
+
+                if(right + 19 > zone2.offset().left) {
+                    $(".zone-2").addClass("active")
+                } else {
+                    $(".zone-2").removeClass("active")
+                }
+
+                //let listHalf = $(".list-item").width
+            },
+            onRelease: function() {
+                //
+                $(".zone-1,.zone-2").removeClass("active")
+
+                // reset list rotation
+                gsap.to(this.target, {
+                    rotation: 0
+                })
             }
         });
     },
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index d97ab6a..8db550f 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -11,24 +11,31 @@
             right: 0
             .zone-content
                 right: 24px
+
+        &.zone-1,
+        &.zone-2
+            &.active
+                .zone-content
+                    +opacity(.2,background-color,$texts-color)
+
         .zone-content
             position: absolute
             top: 50%
             transform: translateY(-50%)
             width: 100%
             max-width: 180px
-            .text
-                margin-bottom: 21px
-
-        form
-            +opacity(.08,background-color,$texts-color)
-            +radius(16px)
+            height: 70%
             padding: 8px
             border: 1px dashed rgba($texts-color,.4)
+            +radius(16px)
+            transition: background-color .2s ease
+
+            .text
+                margin-bottom: 21px
         .slot
             width: 100%
             height: 51px
-            border: 1px solid rgba($texts-color,.24)
+            //border: 1px solid rgba($texts-color,.24)
             +radius(8px)
 
     .screen
@@ -72,6 +79,10 @@
                     opacity: 0 !important
                     visibility: hidden
 
+                &[data-direction=right]
+                    transform: rotate(25deg)
+                &[data-direction=left]
+                    transform: rotate(-25deg)
 
     .controls
         width: 124px
diff --git a/views/index.blade.php b/views/index.blade.php
index a25a03d..b86c6c7 100644
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -27,6 +27,7 @@
         <div id="instantReviewAnimation"></div>
     </div>
 </div>
+<div id="vertical-1" style="position: absolute; height: 100vh; width: 1px; top: 0; left: 1356px; z-index: 999; background: #FFFFFF;"></div>
 <script src="js/quiz.js"></script>
 <script>
     function changeViewportSize () {
-- 
2.39.5