{"id":4643,"date":"2023-07-13T17:56:39","date_gmt":"2023-07-13T17:56:39","guid":{"rendered":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/"},"modified":"2024-12-18T12:03:22","modified_gmt":"2024-12-18T12:03:22","slug":"drag-and-drop-grab","status":"publish","type":"page","link":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/","title":{"rendered":"Drag and Drop &#038; Grab"},"content":{"rendered":"<html><head><meta content=\"text\/html; charset=UTF-8\" http-equiv=\"content-type\"><style type=\"text\/css\">@import url(https:\/\/themes.googleusercontent.com\/fonts\/css?kit=lhDjYqiy3mZ0x6ROQEUoUw);.lst-kix_4d3rbi5g6fjn-4>li:before{content:\"-  \"}.lst-kix_4d3rbi5g6fjn-3>li:before{content:\"-  \"}.lst-kix_4d3rbi5g6fjn-5>li:before{content:\"-  \"}.lst-kix_4d3rbi5g6fjn-2>li:before{content:\"-  \"}.lst-kix_4d3rbi5g6fjn-6>li:before{content:\"-  \"}.lst-kix_azum5k32asmf-6>li:before{content:\"-  \"}.lst-kix_4d3rbi5g6fjn-0>li:before{content:\"-  \"}.lst-kix_4d3rbi5g6fjn-8>li:before{content:\"-  \"}ul.lst-kix_xyig8nax5mf2-4{list-style-type:none}ul.lst-kix_xyig8nax5mf2-3{list-style-type:none}.lst-kix_4d3rbi5g6fjn-1>li:before{content:\"-  \"}.lst-kix_4d3rbi5g6fjn-7>li:before{content:\"-  \"}ul.lst-kix_xyig8nax5mf2-2{list-style-type:none}.lst-kix_mu9yolt1gkd0-8>li:before{content:\"\\0025a0   \"}ul.lst-kix_xyig8nax5mf2-1{list-style-type:none}.lst-kix_azum5k32asmf-7>li:before{content:\"-  \"}ul.lst-kix_xyig8nax5mf2-8{list-style-type:none}ul.lst-kix_xyig8nax5mf2-7{list-style-type:none}.lst-kix_azum5k32asmf-8>li:before{content:\"-  \"}ul.lst-kix_xyig8nax5mf2-6{list-style-type:none}ul.lst-kix_xyig8nax5mf2-5{list-style-type:none}.lst-kix_xyig8nax5mf2-0>li:before{content:\"\\0025cf   \"}ul.lst-kix_xyig8nax5mf2-0{list-style-type:none}ul.lst-kix_y5ll5ofymmub-2{list-style-type:none}ul.lst-kix_y5ll5ofymmub-1{list-style-type:none}.lst-kix_xyig8nax5mf2-1>li:before{content:\"\\0025cb   \"}ul.lst-kix_y5ll5ofymmub-0{list-style-type:none}ul.lst-kix_4d3rbi5g6fjn-8{list-style-type:none}.lst-kix_xyig8nax5mf2-2>li:before{content:\"\\0025a0   \"}ul.lst-kix_y5ll5ofymmub-6{list-style-type:none}ul.lst-kix_4d3rbi5g6fjn-7{list-style-type:none}ul.lst-kix_y5ll5ofymmub-5{list-style-type:none}ul.lst-kix_4d3rbi5g6fjn-6{list-style-type:none}ul.lst-kix_y5ll5ofymmub-4{list-style-type:none}ul.lst-kix_4d3rbi5g6fjn-5{list-style-type:none}ul.lst-kix_y5ll5ofymmub-3{list-style-type:none}.lst-kix_xyig8nax5mf2-3>li:before{content:\"\\0025cf   \"}ul.lst-kix_y5ll5ofymmub-8{list-style-type:none}ul.lst-kix_y5ll5ofymmub-7{list-style-type:none}.lst-kix_lskcpd1ql10v-7>li:before{content:\"-  \"}.lst-kix_lskcpd1ql10v-6>li:before{content:\"-  \"}.lst-kix_lskcpd1ql10v-8>li:before{content:\"-  \"}.lst-kix_5w9v81gi1md3-8>li:before{content:\"-  \"}.lst-kix_5w9v81gi1md3-7>li:before{content:\"-  \"}.lst-kix_5w9v81gi1md3-4>li:before{content:\"-  \"}.lst-kix_5w9v81gi1md3-5>li:before{content:\"-  \"}ul.lst-kix_lskcpd1ql10v-1{list-style-type:none}.lst-kix_5w9v81gi1md3-2>li:before{content:\"-  \"}.lst-kix_5w9v81gi1md3-6>li:before{content:\"-  \"}ul.lst-kix_lskcpd1ql10v-2{list-style-type:none}ul.lst-kix_lskcpd1ql10v-0{list-style-type:none}.lst-kix_5w9v81gi1md3-3>li:before{content:\"-  \"}ul.lst-kix_4d3rbi5g6fjn-0{list-style-type:none}.lst-kix_xyig8nax5mf2-6>li:before{content:\"\\0025cf   \"}ul.lst-kix_5w9v81gi1md3-4{list-style-type:none}ul.lst-kix_5w9v81gi1md3-5{list-style-type:none}ul.lst-kix_5w9v81gi1md3-6{list-style-type:none}ul.lst-kix_5w9v81gi1md3-7{list-style-type:none}ul.lst-kix_4d3rbi5g6fjn-4{list-style-type:none}ul.lst-kix_mu9yolt1gkd0-8{list-style-type:none}.lst-kix_xyig8nax5mf2-4>li:before{content:\"\\0025cb   \"}.lst-kix_xyig8nax5mf2-8>li:before{content:\"\\0025a0   \"}ul.lst-kix_5w9v81gi1md3-8{list-style-type:none}ul.lst-kix_4d3rbi5g6fjn-3{list-style-type:none}ul.lst-kix_mu9yolt1gkd0-7{list-style-type:none}ul.lst-kix_4d3rbi5g6fjn-2{list-style-type:none}.lst-kix_xyig8nax5mf2-5>li:before{content:\"\\0025a0   \"}ul.lst-kix_4d3rbi5g6fjn-1{list-style-type:none}ul.lst-kix_mu9yolt1gkd0-4{list-style-type:none}ul.lst-kix_lskcpd1ql10v-5{list-style-type:none}ul.lst-kix_mu9yolt1gkd0-3{list-style-type:none}.lst-kix_5w9v81gi1md3-0>li:before{content:\"-  \"}.lst-kix_5w9v81gi1md3-1>li:before{content:\"-  \"}ul.lst-kix_lskcpd1ql10v-6{list-style-type:none}ul.lst-kix_mu9yolt1gkd0-6{list-style-type:none}ul.lst-kix_lskcpd1ql10v-3{list-style-type:none}ul.lst-kix_mu9yolt1gkd0-5{list-style-type:none}ul.lst-kix_lskcpd1ql10v-4{list-style-type:none}ul.lst-kix_mu9yolt1gkd0-0{list-style-type:none}ul.lst-kix_5w9v81gi1md3-0{list-style-type:none}ul.lst-kix_5w9v81gi1md3-1{list-style-type:none}.lst-kix_azum5k32asmf-0>li:before{content:\"-  \"}ul.lst-kix_mu9yolt1gkd0-2{list-style-type:none}.lst-kix_xyig8nax5mf2-7>li:before{content:\"\\0025cb   \"}ul.lst-kix_5w9v81gi1md3-2{list-style-type:none}ul.lst-kix_lskcpd1ql10v-7{list-style-type:none}ul.lst-kix_mu9yolt1gkd0-1{list-style-type:none}ul.lst-kix_5w9v81gi1md3-3{list-style-type:none}ul.lst-kix_lskcpd1ql10v-8{list-style-type:none}.lst-kix_azum5k32asmf-1>li:before{content:\"-  \"}.lst-kix_azum5k32asmf-2>li:before{content:\"-  \"}.lst-kix_azum5k32asmf-5>li:before{content:\"-  \"}.lst-kix_azum5k32asmf-3>li:before{content:\"-  \"}.lst-kix_azum5k32asmf-4>li:before{content:\"-  \"}ul.lst-kix_azum5k32asmf-8{list-style-type:none}.lst-kix_tir6jedaun4h-7>li:before{content:\"-  \"}.lst-kix_tir6jedaun4h-8>li:before{content:\"-  \"}ul.lst-kix_azum5k32asmf-3{list-style-type:none}ul.lst-kix_azum5k32asmf-2{list-style-type:none}ul.lst-kix_azum5k32asmf-1{list-style-type:none}.lst-kix_y5ll5ofymmub-1>li:before{content:\"-  \"}ul.lst-kix_azum5k32asmf-0{list-style-type:none}ul.lst-kix_azum5k32asmf-7{list-style-type:none}.lst-kix_y5ll5ofymmub-0>li:before{content:\"-  \"}ul.lst-kix_azum5k32asmf-6{list-style-type:none}ul.lst-kix_azum5k32asmf-5{list-style-type:none}ul.lst-kix_azum5k32asmf-4{list-style-type:none}.lst-kix_y5ll5ofymmub-6>li:before{content:\"-  \"}.lst-kix_tir6jedaun4h-2>li:before{content:\"-  \"}.lst-kix_y5ll5ofymmub-5>li:before{content:\"-  \"}.lst-kix_y5ll5ofymmub-7>li:before{content:\"-  \"}.lst-kix_tir6jedaun4h-3>li:before{content:\"-  \"}.lst-kix_tir6jedaun4h-4>li:before{content:\"-  \"}.lst-kix_y5ll5ofymmub-2>li:before{content:\"-  \"}.lst-kix_tir6jedaun4h-5>li:before{content:\"-  \"}.lst-kix_tir6jedaun4h-6>li:before{content:\"-  \"}.lst-kix_y5ll5ofymmub-3>li:before{content:\"-  \"}.lst-kix_y5ll5ofymmub-4>li:before{content:\"-  \"}.lst-kix_tir6jedaun4h-1>li:before{content:\"-  \"}.lst-kix_tir6jedaun4h-0>li:before{content:\"-  \"}.lst-kix_lskcpd1ql10v-2>li:before{content:\"-  \"}.lst-kix_lskcpd1ql10v-3>li:before{content:\"-  \"}.lst-kix_lskcpd1ql10v-5>li:before{content:\"-  \"}.lst-kix_lskcpd1ql10v-4>li:before{content:\"-  \"}ul.lst-kix_tir6jedaun4h-8{list-style-type:none}ul.lst-kix_tir6jedaun4h-7{list-style-type:none}.lst-kix_lskcpd1ql10v-1>li:before{content:\"-  \"}ul.lst-kix_tir6jedaun4h-6{list-style-type:none}ul.lst-kix_tir6jedaun4h-5{list-style-type:none}.lst-kix_lskcpd1ql10v-0>li:before{content:\"-  \"}ul.lst-kix_tir6jedaun4h-4{list-style-type:none}ul.lst-kix_tir6jedaun4h-3{list-style-type:none}ul.lst-kix_tir6jedaun4h-2{list-style-type:none}ul.lst-kix_tir6jedaun4h-1{list-style-type:none}ul.lst-kix_tir6jedaun4h-0{list-style-type:none}.lst-kix_mu9yolt1gkd0-0>li:before{content:\"\\0025cf   \"}.lst-kix_mu9yolt1gkd0-2>li:before{content:\"\\0025a0   \"}.lst-kix_y5ll5ofymmub-8>li:before{content:\"-  \"}li.li-bullet-0:before{margin-left:-18pt;white-space:nowrap;display:inline-block;min-width:18pt}.lst-kix_mu9yolt1gkd0-1>li:before{content:\"\\0025cb   \"}.lst-kix_mu9yolt1gkd0-4>li:before{content:\"\\0025cb   \"}.lst-kix_mu9yolt1gkd0-6>li:before{content:\"\\0025cf   \"}.lst-kix_mu9yolt1gkd0-3>li:before{content:\"\\0025cf   \"}.lst-kix_mu9yolt1gkd0-7>li:before{content:\"\\0025cb   \"}.lst-kix_mu9yolt1gkd0-5>li:before{content:\"\\0025a0   \"}ol{margin:0;padding:0}table td,table th{padding:0}.c23{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:0pt;border-right-width:0pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:0pt;border-top-style:solid;background-color:#333333;border-left-style:solid;border-bottom-width:0pt;width:451.4pt;border-top-color:#000000;border-bottom-style:solid}.c11{border-right-style:solid;padding:2pt 2pt 2pt 2pt;border-bottom-color:#d9d9d9;border-top-width:1pt;border-right-width:1pt;border-left-color:#d9d9d9;vertical-align:top;border-right-color:#d9d9d9;border-left-width:1pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:1pt;width:50.2pt;border-top-color:#d9d9d9;border-bottom-style:solid}.c15{border-right-style:solid;padding:2pt 2pt 2pt 2pt;border-bottom-color:#d9d9d9;border-top-width:1pt;border-right-width:1pt;border-left-color:#d9d9d9;vertical-align:top;border-right-color:#d9d9d9;border-left-width:1pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:1pt;width:69.8pt;border-top-color:#d9d9d9;border-bottom-style:solid}.c20{border-right-style:solid;padding:2pt 2pt 2pt 2pt;border-bottom-color:#d9d9d9;border-top-width:1pt;border-right-width:1pt;border-left-color:#d9d9d9;vertical-align:top;border-right-color:#d9d9d9;border-left-width:1pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:1pt;width:228pt;border-top-color:#d9d9d9;border-bottom-style:solid}.c27{border-right-style:solid;padding:2pt 2pt 2pt 2pt;border-bottom-color:#d9d9d9;border-top-width:1pt;border-right-width:1pt;border-left-color:#d9d9d9;vertical-align:top;border-right-color:#d9d9d9;border-left-width:1pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:1pt;width:105pt;border-top-color:#d9d9d9;border-bottom-style:solid}.c10{border-right-style:solid;padding:2pt 2pt 2pt 2pt;border-bottom-color:#d9d9d9;border-top-width:1pt;border-right-width:1pt;border-left-color:#d9d9d9;vertical-align:top;border-right-color:#d9d9d9;border-left-width:1pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:1pt;width:44.2pt;border-top-color:#d9d9d9;border-bottom-style:solid}.c24{border-right-style:solid;padding:2pt 2pt 2pt 2pt;border-bottom-color:#d9d9d9;border-top-width:1pt;border-right-width:1pt;border-left-color:#d9d9d9;vertical-align:top;border-right-color:#d9d9d9;border-left-width:1pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:1pt;width:70.5pt;border-top-color:#d9d9d9;border-bottom-style:solid}.c9{border-right-style:solid;padding:2pt 2pt 2pt 2pt;border-bottom-color:#d9d9d9;border-top-width:1pt;border-right-width:1pt;border-left-color:#d9d9d9;vertical-align:top;border-right-color:#d9d9d9;border-left-width:1pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:1pt;width:233.2pt;border-top-color:#d9d9d9;border-bottom-style:solid}.c18{border-right-style:solid;padding:2pt 2pt 2pt 2pt;border-bottom-color:#d9d9d9;border-top-width:1pt;border-right-width:1pt;border-left-color:#d9d9d9;vertical-align:top;border-right-color:#d9d9d9;border-left-width:1pt;border-top-style:solid;background-color:#ffffff;border-left-style:solid;border-bottom-width:1pt;width:105.8pt;border-top-color:#d9d9d9;border-bottom-style:solid}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:\"Arial\";font-style:normal}.c5{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:\"Arial\";font-style:normal}.c12{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:10pt;font-family:\"Arial\";font-style:normal}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:\"Arial\";font-style:normal}.c1{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left;height:11pt}.c6{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:10pt;font-family:\"Arial\";font-style:normal}.c7{margin-left:36pt;padding-top:0pt;padding-bottom:0pt;line-height:1.15;padding-left:0pt;text-align:left}.c22{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;text-align:left}.c19{font-weight:400;text-decoration:none;vertical-align:baseline;font-family:\"Arial\";font-style:normal}.c26{padding-top:16pt;padding-bottom:4pt;line-height:1.15;page-break-after:avoid;text-align:left}.c17{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;text-align:left}.c31{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;color:#0000ee;text-decoration:underline}.c28{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;color:#1155cc;text-decoration:underline}.c21{background-color:#333333;font-family:\"Consolas\";color:#ffffff;font-weight:400}.c8{padding-top:0pt;padding-bottom:0pt;line-height:1.15;text-align:left}.c25{border-spacing:0;border-collapse:collapse;margin-right:auto}.c30{background-color:#ffffff;}.c2{color:#172b4d;font-size:10pt}.c33{color:#434343;font-size:14pt}.c14{orphans:2;widows:2}.c29{color:inherit;text-decoration:inherit}.c34{color:#000000;font-size:20pt}.c32{padding:0;margin:0}.c0{height:0pt}.c13{height:11pt}.c16{font-weight:700}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:\"Arial\"}p{margin:0;color:#000000;font-size:11pt;font-family:\"Arial\"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:\"Arial\";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}<\/style><\/head><body class=\"c30 doc-content\"><h1 class=\"c14 c22\" id=\"huvau6s1qq6va\"><span class=\"c19 c34\">Draggable and Grabbable Items<\/span><\/h1><p class=\"c8 c14\"><span>An item can be set up to be draggable, that means the user can pick it up and drop it somewhere else.<br><br><\/span><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 288.50px; height: 133.44px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg\" style=\"width: 288.50px; height: 133.44px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 288.50px; height: 133.71px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXc9fjcxiEma40pQQQxI70SPu3fp-gzf_QKfW3KS_tg3oAmrPZ7W8WOWOIRNNe8bJ7iEPwYHaMUYZy-eD2mh-5slQ4M8f0nMZHsrAsLhl-womlViA9EsqH_DIUaYJi9G8Z53RM_8ILIBvwwql62D?key=ZJB3znnmYaOvocnMhMLetg\" style=\"width: 288.50px; height: 133.71px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span>This is achieved by editing the properties under Drag Drop Settings, in the editable fields of an item. It has a variety of different properties that will result in different behaviors.<br><br><\/span><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 96.00px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXevkHD6yX5cGFBx5mc3agMrtP8THMWFeBjB-OgWoPZapVl_hFDBwq1S81IUOXcufakU8gH47pYNJ6SU4TFnP_uJTKNWq4kr2C2d2kmL1VidnETMcMK-PDN6kCSClEWapNU8GnSRa-dqIQqlO4uxqQ?key=ZJB3znnmYaOvocnMhMLetg\" style=\"width: 601.70px; height: 96.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span>It is recommended to enable the <\/span><span class=\"c16\">Cast shadows<\/span><span class=\"c3\">&nbsp;property for draggable items to make it easier for a user to judge the position and distance of the item.<br><\/span><\/p><p class=\"c8 c14\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 280.50px; height: 117.42px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdRRbYroc_9rtKGpUn9rwyjJfm_SK2pv6ojKswuodvaw8YufXzoOd5Envd_CFuRTAM-eWenMu3xrbScNluEY5M_2eeZTqRvFIFbzGVb_kJ1T_kOI8-Zm7bpEsQiQJbI0ChclYs5c4vbX6x5ZZZ4?key=ZJB3znnmYaOvocnMhMLetg\" style=\"width: 280.50px; height: 117.42px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><span class=\"c3\"><br><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">Examples:<\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">Here is a quick demo for Lockout \/ Tagout.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span>You can try it out here <\/span><span class=\"c28\"><a class=\"c29\" href=\"https:\/\/app.learnbrite.com\/dashboard\/spaces\/visit\/spc40fa043045d9307a190a04\">https:\/\/app.learnbrite.com\/dashboard\/spaces\/visit\/spc40fa043045d9307a190a04<\/a><\/span><span class=\"c3\">&nbsp;<\/span><\/p><h2 class=\"c14 c17\" id=\"hi3dggu91xyo\"><span class=\"c4\">Drop Zones<\/span><\/h2><p class=\"c8 c14\"><span class=\"c3\">Drop zones are physical areas which define where an object can be dropped. When they are set up and linked to an item, the item will only be able to be dropped on that zone.<\/span><\/p><h2 class=\"c17 c14\" id=\"hv5vd8rm9cumm\"><span>Setting an item as draggable<\/span><\/h2><p class=\"c8 c14\"><span class=\"c3\">In the item&rsquo;s editable fields window, you will have access to the Drag Drop Settings panel, which has the following options:<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><table class=\"c25\"><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2 c16\">Property name<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2 c16\">Type<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2 c16\">Description<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2 c16\">Default value<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">draggable<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">bool<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">Turns the object draggable, which means it can be picked up by longpress and dropped by a single click.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">FALSE<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">dropZoneTags<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">string<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">Tags are used to match drop zones with draggable objects. Objects and drop zones are linked together when they have the same tags.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">dragTriggerEvents<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">string<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">Input Event that will trigger the pick up behavior for the object. Available values are:<\/span><\/p><ul class=\"c32 lst-kix_xyig8nax5mf2-0 start\"><li class=\"c7 li-bullet-0\"><span class=\"c2 c19\">longpress<\/span><\/li><li class=\"c7 li-bullet-0\"><span class=\"c19 c2\">squeezestart<\/span><\/li><li class=\"c7 li-bullet-0\"><span class=\"c19 c2\">tap (deprecated 3.1)<\/span><\/li><li class=\"c7 li-bullet-0\"><span class=\"c19 c2\">active (3.1)<\/span><\/li><\/ul><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">longpress,<br>squeezestart<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">stickToSurfaces<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">bool<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">When this is enabled, while the object is picked up, it will be projected onto the surface the Input Ray is looking at.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">FALSE<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">lockedIntoZoneName<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">string<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">By setting the name of an existing drop zone as value for this field, this object will be constrained to only move across the surface of that drop zone.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">dragPermissions<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">string<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">Roles with permission to pick the object up. If empty, anyone can pick the object up.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">allowDropCancel<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">bool<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">If enabled, the object will return to its original position when dropped on an incorrect place. If disabled, the object can&rsquo;t be dropped anywhere else but the correct drop zone. This only affects objects that have dropZoneTags set up.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">TRUE<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">stickToAnyDropZone<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">bool<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">If enabled, the picked up object will perform the sticky magnetic effect on any drop zone (even the ones that don&rsquo;t have the same drop zone tags) when over it.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">FALSE<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">allowMovingInZAxis<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">bool<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">If enabled, the object can be moved along the Input Ray&rsquo;s Z axis using the mouse wheel or the Y axis of the controller.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">TRUE<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">initialZDistance<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">number<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">Initial distance from ray origin (hand), in percentage (value goes from 0 to 1). 0 means the object sits on the hand, 1 means the object is projected onto surfaces.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">rayMatrix<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">Matrix4<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">Transform Matrix that applies to the object when it&rsquo;s been moved along the ray&rsquo;s Z-axis. This applies when ZDistance is higher than 0 but lower than 1 (object is in mid air).<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">gripMatrix<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">Matrix4<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">Transform Matrix that applies to the object when it&rsquo;s on the hand (ZDistance is 0). By default, this represents the right hand. If nothing else is specified, this matrix will be mirrored on the left hand. Optionally, specific values for the left hand can be set by using the property gripMatrixL.<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c18\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">stickMatrix<\/span><\/p><\/td><td class=\"c10\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">Matrix4<\/span><\/p><\/td><td class=\"c9\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">Transform Matrix that applies to the object when it&rsquo;s over a drop zone<\/span><\/p><\/td><td class=\"c15\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><\/table><p class=\"c1\"><span class=\"c3\"><\/span><\/p><table class=\"c25\"><tr class=\"c0\"><td class=\"c23\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c21\">{&quot;draggable&quot;:true,&quot;dropZoneTags&quot;:&quot;myDropZone1&quot;,&quot;dragTriggerEvents&quot;:&quot;tap&quot;,&quot;stickToSurfaces&quot;:true,&quot;lockedIntoZoneName&quot;:&quot;myDropZone1&quot;,&quot;allowMovingInZAxis&quot;:false,&quot;stickMatrix&quot;:&quot;[1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, 0, 0, 1]&quot;}<\/span><\/p><\/td><\/tr><\/table><p class=\"c1\"><span class=\"c3\"><\/span><\/p><h2 class=\"c17 c14\" id=\"hvlicwu4hyx1b\"><span>Creating a Drop Zone<\/span><\/h2><p class=\"c8 c14\"><span class=\"c3\">Any object can be set as a drop zone. Usually it&rsquo;s recommended to use a transparent plane to help you define where the object will be dropped.<\/span><\/p><p class=\"c8 c14\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 242.67px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXclYn7Serr7UJAHAOCKXTCKeHmX7pQ-tm0CoBKFjVGGuvbq_0EzaP6wKiy1iH9M7PC_RwjzUX4Zkf1gDzaOasEAfim8tYTNFp-6Op79Zbs13AOcvFVC3ZZfITLf2KoEdmQSBFJFdXUPLHAM7ZZ8IQ?key=ZJB3znnmYaOvocnMhMLetg\" style=\"width: 601.70px; height: 242.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">In the editable fields window, you will have access to the Drag Drop Settings panel, which has the following options:<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span style=\"overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 96.00px;\"><img decoding=\"async\" alt=\"\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXevkHD6yX5cGFBx5mc3agMrtP8THMWFeBjB-OgWoPZapVl_hFDBwq1S81IUOXcufakU8gH47pYNJ6SU4TFnP_uJTKNWq4kr2C2d2kmL1VidnETMcMK-PDN6kCSClEWapNU8GnSRa-dqIQqlO4uxqQ?key=ZJB3znnmYaOvocnMhMLetg\" style=\"width: 601.70px; height: 96.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);\" title=\"\"><\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><table class=\"c25\"><tr class=\"c0\"><td class=\"c27\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2 c16\">Property name<\/span><\/p><\/td><td class=\"c11\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2 c16\">Type<\/span><\/p><\/td><td class=\"c20\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2 c16\">Description<\/span><\/p><\/td><td class=\"c24\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2 c16\">Default value<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c27\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">dropZone<\/span><\/p><\/td><td class=\"c11\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">bool<\/span><\/p><\/td><td class=\"c20\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">Turns the object into a drop zone, which means draggable objects can be placed on top of it.<\/span><\/p><\/td><td class=\"c24\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">FALSE<\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c27\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">dropZoneTags<\/span><\/p><\/td><td class=\"c11\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">string<\/span><\/p><\/td><td class=\"c20\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">Tags are used to match drop zones with draggable objects. Objects and drop zones are linked together when they have the same tags.<\/span><\/p><\/td><td class=\"c24\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><tr class=\"c0\"><td class=\"c27\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">dropZoneMatrix<\/span><\/p><\/td><td class=\"c11\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c2\">Matrix4<\/span><\/p><\/td><td class=\"c20\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c19 c2\">Transform Matrix that applies to objects over the drop zone. This is compatible with the property stickMatrix for draggable objects. dropZoneMatrix is applied first.<\/span><\/p><\/td><td class=\"c24\" colspan=\"1\" rowspan=\"1\"><p class=\"c8 c13\"><span class=\"c12\"><\/span><\/p><\/td><\/tr><\/table><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><table class=\"c25\"><tr class=\"c0\"><td class=\"c23\" colspan=\"1\" rowspan=\"1\"><p class=\"c8\"><span class=\"c21\">{&quot;dropZone&quot;:true,&quot;dropZoneTags&quot;:&quot;myDropZone1&quot;}<\/span><\/p><\/td><\/tr><\/table><p class=\"c1\"><span class=\"c3\"><\/span><\/p><h2 class=\"c17 c14\" id=\"had9ummslc9y4\"><span class=\"c4\">Drag and Drop Helper (Editors Only)<\/span><\/h2><p class=\"c8 c14\"><span class=\"c31\"><a class=\"c29\" href=\"https:\/\/docs.google.com\/document\/d\/1LHgAp_ygiT-zkoRXUPbCzy51cZyxaSU-4j-Y7eOq634\/edit?tab=t.0\">Drag and Drop Editor Helper (Editors only)<\/a><\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><h2 class=\"c17 c14\" id=\"hoi02vg4tyg3c\"><span class=\"c4\">Drag and Drop Methods<\/span><\/h2><p class=\"c1\"><span class=\"c5\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c5\">Fixed Distance Mode<\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">User picks the object, distance from object to hand is locked, object can be moved around and dropped. It uses collisions.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">Enhancement: User can bring object closer \/ far away using another control (mouse wheel, joystick,etc) &#8211; useful to place objects in 360<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c5\">Reach Mode<\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">User with a VR controller can pick up objects only within their reach as usually done in VR experiences. Distance from object to hand is also fixed. <\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">The object marked with this drag method will highlight when the vr hand collides with it.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c5\">&ldquo;Attraction&rdquo; Method<\/span><\/p><p class=\"c8 c14\"><span>Object moves to the hand when it&rsquo;s selected. Useful to examine them and leave them where they were. Use the &ldquo;Fixed Distance&rdquo; method to &ldquo;bring an item closer&rdquo; by using the parameters <\/span><span class=\"c16\">allowMovingInZAxis <\/span><span>and <\/span><span class=\"c16\">initialZDistance<\/span><span class=\"c3\">.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c5\">Wear\/use mode<\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">When picked up, the object is &ldquo;in use&rdquo; by the player. Example: A torch. That means the user doesn&rsquo;t need to hold the button anymore and the object would be attached to the hand. Clicking again would activate the object. (A torch would light up, spray will paint, etc)<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">This method can be achieved by bringing the object closer to your body (like the spheres you bring closer to teleport to another environment). -&gt; This can&rsquo;t be done in 2D.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><h3 class=\"c14 c26\" id=\"ht9mbz12wxgtq\"><span class=\"c19 c33\">All-In-One mechanic (configurable)<\/span><\/h3><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c16\">Single click<\/span><span class=\"c3\">&nbsp;activates the object (classic onclick feature already available).<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span>If the object is marked as &ldquo;draggable&rdquo;,<\/span><span class=\"c16\">&nbsp;Long click<\/span><span class=\"c3\">&nbsp;activates Fixed Distance Drag. If we&rsquo;re in VR and the hand is colliding, then it&rsquo;s the classic &ldquo;pick up&rdquo; feature described in the &ldquo;Reach&rdquo; mode.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">If the object is marked as draggable and it doesn&rsquo;t have an onclick action, a single click can also start the drag mode.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c5\">At this point object is in drag mode (Fixed Distance mode)<\/span><\/p><p class=\"c1\"><span class=\"c5\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">The object can be dropped by releasing the primary button<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c16\">If the object is far away<\/span><span class=\"c3\">, a small 3D caption is shown above the object letting the user know that a secondary action is available:<\/span><\/p><ul class=\"c32 lst-kix_lskcpd1ql10v-0 start\"><li class=\"c7 c14 li-bullet-0\"><span class=\"c3\">in VR it says &ldquo;Squeeze to bring closer&rdquo;.<\/span><\/li><li class=\"c7 c14 li-bullet-0\"><span class=\"c3\">in 2D it says: &ldquo;Right click to bring closer&rdquo;.<\/span><\/li><\/ul><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c16\">If the secondary action is triggered<\/span><span>, the object goes<\/span><span>&nbsp;directly to the hand<\/span><span>, which would take us to <\/span><span class=\"c5\">Reach Mode<\/span><\/p><p class=\"c1\"><span class=\"c5\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">If the mouse wheel \/ controller joystick feature to move the object far away\/closer to us is enabled, that is also another way to activate Reach Mode.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">Remember that if the object was already within reach (closer to the hand), Fixed Distance mode will be skipped and we&rsquo;ll get directly to reach mode.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c5\">Once in Reach Mode<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span>If the user releases the primary button, the object will be <\/span><span>dropped in the position<\/span><span class=\"c3\">&nbsp;that it is in that moment.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">if the object is &ldquo;wearable&rdquo;, we show another caption:<\/span><\/p><ul class=\"c32 lst-kix_4d3rbi5g6fjn-0 start\"><li class=\"c7 c14 li-bullet-0\"><span class=\"c3\">in VR: &ldquo;Squeeze to use&rdquo;<\/span><\/li><li class=\"c7 c14 li-bullet-0\"><span class=\"c3\">in 2D: &ldquo;Right click to use&rdquo;<\/span><\/li><\/ul><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">If the user triggers the secondary action then the object is now activated as a wearable item owned by the user<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c5\">Once in Wearable mode<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span>At this point the user can release the <\/span><span>primary button and further clicks will execute actions defined for the object (like turning on a torch). <\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">The user can&rsquo;t click on anything else since it&rsquo;s &ldquo;using&rdquo; the current object.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">Another caption will be shown:<\/span><\/p><ul class=\"c32 lst-kix_azum5k32asmf-0 start\"><li class=\"c7 c14 li-bullet-0\"><span class=\"c3\">in VR: &ldquo;Click to activate, Squeeze to drop&rdquo;<\/span><\/li><li class=\"c7 c14 li-bullet-0\"><span class=\"c3\">in 2D: &ldquo;Click to activate, Right-click to drop&rdquo;<\/span><\/li><\/ul><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span>Secondary interaction will drop the object.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><h2 class=\"c17 c14\" id=\"h96dhoayl5ow8\"><span class=\"c4\">Drag and Drop Zones<\/span><\/h2><p class=\"c8 c14\"><span class=\"c3\">As an additional mechanic, objects can be locked into drop zones. That means the object can only be dropped in a drop zone. It would teleport back to its original position if dropped outside a drop zone.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">Drop zones can optionally use tags. This is useful to place different kinds of objects in different places.<\/span><\/p><h2 class=\"c17 c14\" id=\"h4ti9mpos76iv\"><span class=\"c4\">Trigger zones<\/span><\/h2><p class=\"c8 c14\"><span class=\"c3\">Similar to drop zones, trigger zones would be colliders to detect that some object is inside it. This is useful for interactivity, such as using a tool upon another object. <\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c3\">Example: The user picks up a screwdriver, moves it into a machine that they need to repair, and the machine glows indicating that the user needs to press the button. Then the &ldquo;repair&rdquo; action takes place.<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span class=\"c16\">Note<\/span><span class=\"c3\">: Trigger zone functionality currently available only through scripting.<\/span><\/p><h2 class=\"c17 c14\" id=\"hb6a0ltsrqyx8\"><span class=\"c4\">Buttons \/ Interaction<\/span><\/h2><p class=\"c8 c14\"><span class=\"c3\">In order to be consistent across all devices the platform does not count on controllers having more than 1 button. When the device only has one primary button (like gaze or touchscreen) only the first drag method will be able to be used.<\/span><\/p><h2 class=\"c17 c14\" id=\"hby8gu1zfjwxp\"><span class=\"c4\">Multiuser<\/span><\/h2><p class=\"c8 c14\"><span class=\"c3\">Object movement should always be transmitted through multiuser. However changes in draggable items positions will not persist (their new positions won&rsquo;t be saved for when you revisit).<\/span><\/p><p class=\"c1\"><span class=\"c3\"><\/span><\/p><p class=\"c8 c14\"><span>If an object is picked up by a user, other users are not be able to interact with it.<\/span><\/p><\/body><\/html>","protected":false},"excerpt":{"rendered":"Draggable and Grabbable ItemsAn item can be set up to be draggable, that means the user can pick it up and drop it somewhere else.This is achieved by editing the properties under Drag Drop Settings, in the editable fields of an item. It has a variety of different properties that will result in different behaviors.It [&hellip;]","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-4643","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Drag and Drop &amp; Grab<\/title>\n<meta name=\"description\" content=\"Drag and Drop &amp; Grab\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Drag and Drop &amp; Grab\" \/>\n<meta property=\"og:description\" content=\"Drag and Drop &amp; Grab\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/\" \/>\n<meta property=\"og:site_name\" content=\"Metaverse Academy\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-18T12:03:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/\",\"url\":\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/\",\"name\":\"Drag and Drop & Grab\",\"isPartOf\":{\"@id\":\"https:\/\/hyperspace.mv\/academy\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg\",\"datePublished\":\"2023-07-13T17:56:39+00:00\",\"dateModified\":\"2024-12-18T12:03:22+00:00\",\"description\":\"Drag and Drop & Grab\",\"breadcrumb\":{\"@id\":\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#primaryimage\",\"url\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg\",\"contentUrl\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hyperspace.mv\/academy\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Drag and Drop &#038; Grab\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hyperspace.mv\/academy\/#website\",\"url\":\"https:\/\/hyperspace.mv\/academy\/\",\"name\":\"Metaverse Academy\",\"description\":\"Learn to build WebXR metaverse experiences for 3D, 360, VR\/AR\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hyperspace.mv\/academy\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Drag and Drop & Grab","description":"Drag and Drop & Grab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/","og_locale":"en_US","og_type":"article","og_title":"Drag and Drop & Grab","og_description":"Drag and Drop & Grab","og_url":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/","og_site_name":"Metaverse Academy","article_modified_time":"2024-12-18T12:03:22+00:00","og_image":[{"url":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/","url":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/","name":"Drag and Drop & Grab","isPartOf":{"@id":"https:\/\/hyperspace.mv\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#primaryimage"},"image":{"@id":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg","datePublished":"2023-07-13T17:56:39+00:00","dateModified":"2024-12-18T12:03:22+00:00","description":"Drag and Drop & Grab","breadcrumb":{"@id":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#primaryimage","url":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg","contentUrl":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfYyP3FJDdYrBz-J8FpXYILUddFgbPiG7u-OmT_6RxGRH6bXb6bJhoZr3BH929UtntFBlC1Nf9LrK7ZuhXMlVDmhmn_33PgDUQhEDDUuozVY9CLM-6MeWmGxU13gHEgpfceRRKVHT8JlAivoY2B4Q?key=ZJB3znnmYaOvocnMhMLetg"},{"@type":"BreadcrumbList","@id":"https:\/\/hyperspace.mv\/academy\/drag-and-drop-grab\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hyperspace.mv\/academy\/"},{"@type":"ListItem","position":2,"name":"Drag and Drop &#038; Grab"}]},{"@type":"WebSite","@id":"https:\/\/hyperspace.mv\/academy\/#website","url":"https:\/\/hyperspace.mv\/academy\/","name":"Metaverse Academy","description":"Learn to build WebXR metaverse experiences for 3D, 360, VR\/AR","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hyperspace.mv\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/pages\/4643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/comments?post=4643"}],"version-history":[{"count":5,"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/pages\/4643\/revisions"}],"predecessor-version":[{"id":4983,"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/pages\/4643\/revisions\/4983"}],"wp:attachment":[{"href":"https:\/\/hyperspace.mv\/academy\/wp-json\/wp\/v2\/media?parent=4643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}