3 Replies Latest reply on May 19, 2016 12:38 PM by philn12478016

    Touch & Dragging elements on mobile not working with Edge Animate

    philn12478016

      We have a project that works great on desktop browser, but when we load for the mobile device we are seeing the touch and dragging of the object failing to function the same as desktop.

       

      What is happening is:

      When the user touches a draggable object the object jumps to the top and left of the finger instead of staying with the users finger as they drag the element across the screen.

        • 1. Re: Touch & Dragging elements on mobile not working with Edge Animate
          ddhayles Level 3

          What is the code you are using for the touch actions?

          • 2. Re: Touch & Dragging elements on mobile not working with Edge Animate
            resdesign Adobe Community Professional & MVP

            Sorry for budding in. If you do not want to  mess with touch code you can use touch punch. Place it after jqueryUI in script panel.

            jQuery UI Touch Punch - Touch Event Support for jQuery UI

            • 3. Re: Touch & Dragging elements on mobile not working with Edge Animate
              philn12478016 Level 1

              Here the code I'm using in the HTML, but I'm not sure if I Touch Punch implemented properly. Thank you for any input you might have. I can share additional information if you would like to see more. - Thanks!

               

              <script src="js/edge.6.0.0.min.js"></script>

                  <link href="css/bootstrap.css" rel="stylesheet" />

                  <link href="css/jquery-ui.css" rel="stylesheet" />

                  <script src="js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>

                  <script src="js/jquery.ui.touch-punch.min.js" type="text/javascript"></script>

                  <link href="css/custom.css" rel="stylesheet" />

                  <script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>

                  <style>

                      .edgeLoad-EDGE-11525665 { visibility:hidden; }

                      .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {

                          background: url(images/slider_thumb.png) no-repeat;

                          height: 20px;

                          width: 36px;

                          border: none;

                          background-size: contain;

                      }

               

               

                      .ui-slider-vertical .ui-slider-handle {

                          left: -.4em;

                      }

               

               

                      .ui-widget-content {

                          background: url(images/slider_track.png) no-repeat;

                          width: 26px;

                          border: none;

                          background-size: contain;

                      }

               

               

                      .ui-widget-header {

                          background: none;

                          width: 34px;

                      }

               

               

                      #slider-vertical {

                          margin-left: 10px;

                      }

               

               

                      @media (max-width:1024px) {

                          #slider-vertical {

                              margin-left: 0;

                          }

                      }

                  </style>

              <script>

                 AdobeEdge.loadComposition('008', 'EDGE-11525665', {

                     scaleToFit: "both",

                     centerStage: "both",

                     minW: "0px",

                     maxW: "undefined",

                     width: "1024px",

                     height: "768px",

                     bScaleToParent: true

                 }, { "dom": {} }, { "dom": {} });

               

               

                 AdobeEdge.bootstrapCallback(function (compId) {

               

               

                     $.getScript("js/jquery.mobile.custom.min.js", function (data, textStatus, jqxhr) {

               

               

                     });

               

               

                     $('#myCarousel').on('slide.bs.carousel', function () {

                         var imageurl = $('#myCarousel').find(".item:last img:first").attr("src");

                         $('#myCarousel').find("img[src='" + imageurl + "']").each(function (event) {

                             $(this).closest("div").css("border-right", "2px solid #fff");

                         });

               

               

                     });

               

               

                     if (sessionStorage.getItem('StoryType').toString() == "Myself") {

                         $("#Stage_pg08").remove();

                     }

               

               

                 });

               

               

              </script>

              <!--Adobe Edge Runtime End-->