4 Replies Latest reply on Jan 3, 2013 3:36 AM by AmintaAdobe

    how to use touch start, touch move, mouse down, mouse move to move elements in edge

    hezlym

      How to use touch move and mouse move events events to move elements n edge?

        • 1. Re: how to use touch start, touch move, mouse down, mouse move to move elements in edge
          EMFrychian

          I would like to know this as well — more specifically, how to make an object moveable and constrain it on a horizontally path throughout the page. It seems you may start with a mousedown action but not sure.

           

          I'm trying to create a timeline graphic, where a person will move a time indicator horizontally. When a person drags the indicator on a specific date on the timeline, there will be a trigger to bring up a box that will have information regarding what happened on that date.

           

          I have no idea how to begin doing this.

           

          Thanks in advance!

          • 2. Re: how to use touch start, touch move, mouse down, mouse move to move elements in edge
            hezlym Level 1

            Here is my code for a vertical carousel for mouse and touch interaction.  it's not perfect, but it does the job.  change from Y to X for horizontal path.  past at Stage.compositionready event.

             

            // these are my elemens

            var temp1 = sym.getSymbol("vmenu2").$("tvchannels").position().top;

            var temp2 = sym.getSymbol("vmenu2").$("videosondemand").position().top;

            var temp3 = sym.getSymbol("vmenu2").$("radiochannels").position().top;

            var temp4 = sym.getSymbol("vmenu2").$("music2").position().top;

            var temp5 = sym.getSymbol("vmenu2").$("info").position().top;

            var temp6 = sym.getSymbol("vmenu2").$("vrtour").position().top;

            var temp7 = sym.getSymbol("vmenu2").$("weather").position().top;

            var temp8 = sym.getSymbol("vmenu2").$("clock").position().top;

            var temp9 = sym.getSymbol("vmenu2").$("settings").position().top;

             

             

            var tempa = sym.getSymbol("vmenu2").$("tvchannels").height();

            var tempb = 200;

             

            var tempdiff = temp2 - temp1;

             

            var y1=0;

            var y2=0;

             

            var t = 0;

             

            $(document).bind("touchstart", function(e) { 

              e.preventDefault(); 

              y1 = e.originalEvent.touches[0].pageY;

             

              temp1 = sym.getSymbol("vmenu2").$("tvchannels").position().top;

              temp2 = sym.getSymbol("vmenu2").$("videosondemand").position().top;

              temp3 = sym.getSymbol("vmenu2").$("radiochannels").position().top;

              temp4 = sym.getSymbol("vmenu2").$("music2").position().top;

              temp5 = sym.getSymbol("vmenu2").$("info").position().top;

              temp6 = sym.getSymbol("vmenu2").$("vrtour").position().top;

              temp7 = sym.getSymbol("vmenu2").$("weather").position().top;

              temp8 = sym.getSymbol("vmenu2").$("clock").position().top;

              temp9 = sym.getSymbol("vmenu2").$("settings").position().top;

             

              t = 1;

            }); 

             

            $(document).bind("touchend", function(e) { 

              e.preventDefault(); 

              t = 0;

            });

             

             

            $(document).bind("touchmove", function(e) { 

              e.preventDefault(); 

              //var x = e.originalEvent.touches[0].pageX;

              y2 = e.originalEvent.touches[0].pageY;

              //sym.getSymbol("vmenu2").$("tvchannels").css({top: y, left: x}); 

             

              if (t==1) {

             

                var y = y2 - y1; 

             

                var top1 = temp1 + y + tempdiff;

                var top2 = temp2 + y + tempdiff;

                var top3 = temp3 + y + tempdiff;

                var top4 = temp4 + y + tempdiff;

                var top5 = temp5 + y + tempdiff;

                var top6 = temp6 + y + tempdiff;

                var top7 = temp7 + y + tempdiff;

                var top8 = temp8 + y + tempdiff;

                var top9 = temp9 + y + tempdiff;

             

                if (top1<10) {

                  if (top9>250) {

                    sym.getSymbol("vmenu2").$("tvchannels").css({top: top1}); 

                    sym.getSymbol("vmenu2").$("videosondemand").css(); 

                    sym.getSymbol("vmenu2").$("radiochannels").css();

                    sym.getSymbol("vmenu2").$("music2").css();

                    sym.getSymbol("vmenu2").$("info").css();

                    sym.getSymbol("vmenu2").$("vrtour").css();

                    sym.getSymbol("vmenu2").$("weather").css();

                    sym.getSymbol("vmenu2").$("clock").css();

                    sym.getSymbol("vmenu2").$("settings").css();

                  }

               }

            }

            }); 

             

            var d = 0;

             

            $(document).bind("mousedown", function(e) { 

              e.preventDefault(); 

              y1 = e.pageY;

             

              temp1 = sym.getSymbol("vmenu2").$("tvchannels").position().top;

              temp2 = sym.getSymbol("vmenu2").$("videosondemand").position().top;

              temp3 = sym.getSymbol("vmenu2").$("radiochannels").position().top;

              temp4 = sym.getSymbol("vmenu2").$("music2").position().top;

              temp5 = sym.getSymbol("vmenu2").$("info").position().top;

              temp6 = sym.getSymbol("vmenu2").$("vrtour").position().top;

              temp7 = sym.getSymbol("vmenu2").$("weather").position().top;

              temp8 = sym.getSymbol("vmenu2").$("clock").position().top;

              temp9 = sym.getSymbol("vmenu2").$("settings").position().top;

             

              d = 1;

            }); 

             

            $(document).bind("mouseup", function(e) { 

              e.preventDefault(); 

              d = 0;

            }); 

             

             

            $(document).bind("mousemove", function(e) { 

              e.preventDefault(); 

              //var x = e.originalEvent.touches[0].pageX;

              y2 = e.pageY;

              //sym.getSymbol("vmenu2").$("tvchannels").css({top: y, left: x}); 

             

              if (d==1) {

             

                var y = y2 - y1; 

             

                var top1 = temp1 + y + tempdiff;

                var top2 = temp2 + y + tempdiff;

                var top3 = temp3 + y + tempdiff;

                var top4 = temp4 + y + tempdiff;

                var top5 = temp5 + y + tempdiff;

                var top6 = temp6 + y + tempdiff;

                var top7 = temp7 + y + tempdiff;

                var top8 = temp8 + y + tempdiff;

                var top9 = temp9 + y + tempdiff;

             

                if (top1<10) {

                  if (top9>250) {

                    sym.getSymbol("vmenu2").$("tvchannels").css({top: top1}); 

                    sym.getSymbol("vmenu2").$("videosondemand").css(); 

                    sym.getSymbol("vmenu2").$("radiochannels").css();

                    sym.getSymbol("vmenu2").$("music2").css();

                    sym.getSymbol("vmenu2").$("info").css();

                    sym.getSymbol("vmenu2").$("vrtour").css();

                    sym.getSymbol("vmenu2").$("weather").css();

                    sym.getSymbol("vmenu2").$("clock").css();

                    sym.getSymbol("vmenu2").$("settings").css();

             

                  }

                }

             

            }

            }); 

            • 3. Re: how to use touch start, touch move, mouse down, mouse move to move elements in edge
              aelxproter Level 1

              This is some code I found on the forums that helps me drag an object around on the screen using an ipad.  Hopefully this will help.

               

               

              Within compositionReady:

               

              $.fn.draggable = function()

              {

                var offset = null;

                var start = function(e)

                {

                var orig = e.originalEvent;

                  var pos = $(this).position();

                  offset = {

                    x: orig.changedTouches[0].pageX - pos.left,

                    y: orig.changedTouches[0].pageY - pos.top

                  };

                };

               

                var moveMe = function(e)

                {

                  e.preventDefault();

                  var orig = e.originalEvent;

                  $(this).css({

                    top: orig.changedTouches[0].pageY - offset.y,

                    left: orig.changedTouches[0].pageX - offset.x

                  });

                };

               

                this.bind("touchstart", start);

                this.bind("touchmove", moveMe);

              };

               

               

              sym.$("Drag1").draggable();

              sym.$("Drag1").css("z-index",50000);

              • 4. Re: how to use touch start, touch move, mouse down, mouse move to move elements in edge
                AmintaAdobe Level 1

                Hi EmFry!

                 

                 

                Your code is very interesting but it is difficult to understand without a sample file: can you post it here?

                 

                 

                Many thanks!

                 

                Davide