From 23b5a8aa79426930b849c08e7021da1c7e1c071d Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 11 Sep 2023 14:37:12 +0200 Subject: [PATCH] wip #6182 @2:30 question drag and drop --- js/quiz.draganddrop.js | 93 ++++++++++++-------- style/106-question-draganddrop.sass | 62 +++++++------ views/screens/question_draganddrop.blade.php | 2 +- 3 files changed, 93 insertions(+), 64 deletions(-) diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js index c487207..387ecc1 100644 --- 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 edc5264..42fe4ea 100644 --- 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 7297962..10d9bc1 100644 --- a/views/screens/question_draganddrop.blade.php +++ b/views/screens/question_draganddrop.blade.php @@ -22,7 +22,7 @@