},
createDraggable: function ($this) {
- Draggable.create($this.item, {
- type: $this.quiz.resize.isMobile() ? "y" : "x,y",
- edgeResistance: 0.2,
- inertia: false,
- bounds: "#quiz",
- onDragParams: [{}],
- onDrag: function () {
- $(".zone-1,.zone-2").removeClass("notDrag")
- $(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)
- let zone = $this.getZoneOverlap(this.target)
-
- // fix bug scale !important from css
- gsap.to(this.target, {
- scale: 1, duration: 0, immediateRender: true
- })
+ setTimeout(function() {
+ Draggable.create($this.item, {
+ type: $this.quiz.resize.isMobile() ? "y" : "x,y",
+ edgeResistance: 0.2,
+ inertia: false,
+ bounds: "#quiz",
+ onDragParams: [{}],
+ onDrag: function () {
+ $(".zone-1,.zone-2").removeClass("notDrag")
+ $(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)
+ let zone = $this.getZoneOverlap(this.target)
+
+ // fix bug scale !important from css
+ gsap.to(this.target, {
+ scale: 1, duration: 0, immediateRender: true
+ })
- //
- //$this.setOpacityZone(this.target,direction)
+ //
+ //$this.setOpacityZone(this.target,direction)
- //set rotation on desktop
- if (!$this.quiz.resize.isMobile()) {
- $this.rotateItem(this, direction)
- }
+ //set rotation on desktop
+ if (!$this.quiz.resize.isMobile()) {
+ $this.rotateItem(this, direction)
+ }
- // actions when enter in zone
- $this.enterZone(zone)
+ // actions when enter in zone
+ $this.enterZone(zone)
- // actions when leave zone
- if (!zone) {
- $this.leaveZone()
- }
- },
- onDragEnd: function () {
- //
- let zone = $this.getZoneOverlap(this.target)
- if (zone) {
- $this.sendCurrentAnswerToArea(zone, $(this.target).data("id"));
- }
+ // actions when leave zone
+ if (!zone) {
+ $this.leaveZone()
+ }
+ },
+ onDragEnd: function () {
+ //
+ let zone = $this.getZoneOverlap(this.target)
+ if (zone) {
+ $this.sendCurrentAnswerToArea(zone, $(this.target).data("id"));
+ }
+
+ //
+ $(".zone-content").removeClass("active")
+ },
+ onRelease: function () {
+ //
+ $(".zone-1,.zone-2").addClass("notDrag")
- //
- $(".zone-content").removeClass("active")
- },
- onRelease: function () {
- //
- $(".zone-1,.zone-2").addClass("notDrag")
+ //
+ document.documentElement.style.setProperty('--opacity-zone-1', '0');
+ document.documentElement.style.setProperty('--opacity-zone-2', '0');
- //
- document.documentElement.style.setProperty('--opacity-zone-1', '0');
- document.documentElement.style.setProperty('--opacity-zone-2', '0');
+ //
+ $this.leaveZone()
+
+ //
+ if (!$this.getZoneOverlap(this.target)) {
+ gsap.to(this.target, {
+ x: 0, y: 0,
+ })
+ }
- //
- $this.leaveZone()
+ $(this.target).removeClass("isDragging")
- //
- if (!$this.getZoneOverlap(this.target)) {
+ // reset list rotation
gsap.to(this.target, {
- x: 0, y: 0,
+ rotation: 0
})
}
+ });
+ }, 1000)
- $(this.target).removeClass("isDragging")
-
- // reset list rotation
- gsap.to(this.target, {
- rotation: 0
- })
- }
- });
},
rotateItem: function ($this, direction) {