wip #6182 @2:30 question drag and drop

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index c487207df7acc7d1611278a87b96fb962b78b2f2..387ecc169934f7cd1614c46a6adcbc785c6000e0 100644 (file)
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -32,12 +32,21 @@ QuizDragAndDrop.prototype = {
             bounds: "#quiz",
             onDragParams: [{}],
             onDrag: function() {
+                $(this.target).addClass("isDragging").removeClass("isNext")
+
                 $this.offsetLeftItemDragged = $(this.target).offset().left
                 $this.offsetRightItemDragged = $(this.target).offset().left + $(this.target).outerWidth()
                 let direction = this.getDirection()
 
                 let zone = $this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged)
 
+                // fix bug scale !important from css
+                gsap.to(this.target, {
+                    scale: 1,
+                    duration: 0,
+                    immediateRender: true
+                })
+
                 //set rotation
                 $this.rotateItem(this,direction)
 
@@ -51,51 +60,63 @@ QuizDragAndDrop.prototype = {
             },
             onDragEnd: function() {
                 //
-                let zone = $this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged),
-                    slot = $this.getSlotInformations(zone);
+                let zone = $this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged)
+                let slot = false
+                if(zone) {
+                    slot = $this.getSlotInformations(zone)
+                }
 
                 let target = $(this.target),
                     heightTarget = $(this.target).height()
 
                 //
-                gsap.timeline().to(this.target, {
-                    width: slot.w,
-                    height: slot.h,
-                    x: slot.x,
-                    y: slot.y,
-                    fontSize: "14px",
-                    padding: "7px 8px",
-                    borderRadius: "8px",
-                    onStart: function() {
-                        target.addClass("onStart")
-                    },
-                    onComplete: function() {
-                        let html = target.html()
-                        $(zone).find(".slot:not(.active)").eq(0).addClass("active").html(html)
-                        target.remove()
-                    }
-                })
-                .to(".list .overlay", {
-                    y: -heightTarget,
-                    opacity: 0,
-                    onStart: function() {
-                        $($this.target).next().addClass("isNext")
-                    }
-                }, "<")
-                .to(".list .overlay", {
-                    y: 0,
-                    opacity: 1,
-                    duration: 0
-                })
-
-                //
-                //$(".zone-2 .slot:not(.active)").eq(0).addClass("active")
+                if(slot) {
+                    gsap.timeline().to(this.target, {
+                        width: slot.w,
+                        height: slot.h,
+                        x: slot.x,
+                        y: slot.y,
+                        fontSize: "14px",
+                        padding: "7px 8px",
+                        borderRadius: "8px",
+                        onStart: function () {
+                            target.addClass("isValidated")
+                        },
+                        onComplete: function () {
+                            let html = target.html()
+                            $(zone).find(".slot:not(.active)").eq(0).addClass("active").html(html)
+                            target.remove()
+                        }
+                    })
+                    .to(".list .overlay", {
+                        y: -heightTarget,
+                        opacity: 0,
+                        onStart: function () {
+                            $(".list-item.isValidated").next().addClass("isNext")
+                        }
+                    }, "<")
+                    .to(".list .overlay", {
+                        y: 0,
+                        opacity: 1,
+                        duration: 0
+                    }, "+=1")
+                }
 
             },
             onRelease: function() {
                 //
                 $this.leaveZone()
 
+                //
+                if(!$this.getZoneOverlap($this.offsetLeftItemDragged,$this.offsetRightItemDragged)) {
+                    gsap.to(this.target, {
+                        x: 0,
+                        y: 0,
+                    })
+                }
+
+                $(this.target).removeClass("isDragging")
+
                 // reset list rotation
                 gsap.to(this.target, {
                     rotation: 0
@@ -152,7 +173,9 @@ QuizDragAndDrop.prototype = {
             el = $(zone).find(".slot")
 
         return {"x" : x, "y" : y, "w" : w, "h": h, "el": el}
-    }
+    },
+
+
 }
 
 export default QuizDragAndDrop;

diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index edc5264eea47341db8be44f0e7ddad56a024627a..42fe4ea3f313585bc5740c59025c7c4cfa52c233 100644 (file)
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -67,36 +67,42 @@
                         z-index: 4
                         border: 2px solid $texts-color
                         top: 0
-                    &:nth-child(2)
-                        opacity: .64 !important
-                        +opacity(.8,background-color,$neutral-color)
-                        transform: scale(.92) !important
-                        z-index: 3
-                        top: 30px
-                    &:nth-child(3)
-                        opacity: .4 !important
-                        +opacity(.8,background-color,$neutral-color)
-                        transform: scale(.83) !important
-                        z-index: 2
-                        top: 60px
-                    &:nth-child(4)
-                        opacity: .16 !important
-                        +opacity(.8,background-color,$neutral-color)
-                        transform: scale(0.75) !important
-                        z-index: 1
-                        top: 87px
-                    &:not(:nth-child(-n+4)) // on cache les items à partir du 5ème
-                        opacity: 0 !important
-                        visibility: hidden
-                    &.onStart
-                        font-size: 14px
-                        border: 1px solid rgba($texts-color,.24)
-                        transition: border .3s, font-size .3s
-                    &:not(:nth-child(1))
-                        clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%)
                         &.isNext
-                            clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%)
+                            transform: scale(1) !important
                             transition: all .3s
+                    &:not(.isDragging)
+                        &:nth-child(2)
+                            opacity: .64 !important
+                            +opacity(.8,background-color,$neutral-color)
+                            transform: scale(.92) !important
+                            z-index: 3
+                            top: 30px
+                        &:nth-child(3)
+                            opacity: .4 !important
+                            +opacity(.8,background-color,$neutral-color)
+                            transform: scale(.83) !important
+                            z-index: 2
+                            top: 60px
+                        &:nth-child(4)
+                            opacity: .16 !important
+                            +opacity(.8,background-color,$neutral-color)
+                            transform: scale(0.75) !important
+                            z-index: 1
+                            top: 87px
+                        &:not(:nth-child(-n+4)) // on cache les items à partir du 5ème
+                            opacity: 0 !important
+                            visibility: hidden
+                        &.isValidated
+                            font-size: 14px
+                            border: 1px solid rgba($texts-color,.24)
+                            transition: border .3s, font-size .3s
+                        &:not(:nth-child(1))
+                            clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%)
+                            transition: all .3s
+                            pointer-events: none
+                            &.isNext
+                                clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%)
+                                transition: all .3s
 
                 &[data-direction=right]
                     transform: rotate(25deg)

diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 729796245689fcdbfc94225a70de065731c91262..10d9bc1243fcdd291045b9a7186e63920849b50e 100644 (file)
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -22,7 +22,7 @@
         </div>
         <ul class="list">
             @foreach($question['answers'] as $key => $answer)
-                <li class="list-item">
+                <li class="list-item {{ $key === 0 ? 'current' : '' }}">
                     {{$answer['answer']}}
                 </li>
             @endforeach