18 Replies Latest reply on Nov 12, 2015 10:35 PM by chwac88205879

    Cursor misalignment with responsive drag and drop.

    douglasvautour

      Hello!

       

      I am using jquery ui to make items draggable and droppable. I also am using the new responsive feature (thank you!) to make the entire animation scale.

       

      However, when I try to click on my draggable items, the cursor and the item become misaligned. It seems like when the cursor is at x,y the draggable item is at x^2, y^2, the further the cursor gets away from the top left, the greater the distance between the droppable object and the cursor.

       

      I can still let go of the cursor over droppable zones and the draggable object behaves as it has dropped, even though it appears in the wrong position.

       

      I read something about adjusting the alignment of the stage, but that didn't work. See below.

       

      http://forums.adobe.com/message/4817827#4817827

       

      Any advice is greatly appreciated. Some code that I can place directly into the stage compositionReady would be excellent.

       

      Thank you very much

        • 1. Re: Cursor misalignment with responsive drag and drop.
          resdesign Adobe Community Professional & MVP

          For you dragable elements use applied instead of global or delete the property layers in that may be there for top and left if you are not using them for anything.

           

          Check out tip # 3 here: http://www.edgehero.com/tutorials/symbols

          1 person found this helpful
          • 2. Re: Cursor misalignment with responsive drag and drop.
            robboerman Level 4

            i don't know what plugin you are using for that.

            but if you are using jqueryui, you can't make that work responsive (based on % ) or on scaling.

            you can make the stage really small and overflow not hidden so you are able to drag everything on the whole screen, even with a smaller screen.

            1 person found this helpful
            • 3. Re: Cursor misalignment with responsive drag and drop.
              douglasvautour Level 1

              Hello!


              Thank you for your reply.

               

              I do not have any keyframes set at all for position or orientation. I always make sure to delete them when they are not needed. Also, I have set position to applied, and have even tried both responsive layout presets, and I am still having the same issue.

               

              Any other ideas? I am placing a link here.

               

              Thanks again!

              • 4. Re: Cursor misalignment with responsive drag and drop.
                douglasvautour Level 1

                Hello!

                 

                Thank you for your reply.

                 

                I am using jquery-ui-1.10.4.custom.min.js, and have just placed it in the root folder. I am calling it with yepnope and an init function.

                 

                So, if this is not possible, is there another way to make this work, either without jqueryui draggable/droppable or by coding some other scaling mechanism?

                 

                I tried making a smaller stage, but I had the same issue. The problem is that the cursor and the draggable element are not in the same position as each other. Please see the following link.

                 

                Due to the nature of the animation, I can't turn overflow to not hidden. I have a screen that slides into place.

                 

                Sorry if I have misunderstood your post!

                 

                Thank you again.

                • 5. Re: Cursor misalignment with responsive drag and drop.
                  cyclux

                  Hello everybody,

                   

                  I have a very similar problem: It has to do with the responsive layout.

                  This option manipulates the coordinates of the cursor. Here are two examples:

                   

                  Static (this works) -> http://sandbox.junglecrowd.org/static/publish/web/static.html

                  Responsive (positioning depends on window size and position of the cursor  -> greatest misplacement @ right bottom)

                  http://sandbox.junglecrowd.org/responsive/publish/web/responsive.html

                   

                  How can I compensate the manipulation of the coordinates caused by the responsive stage?

                  The result is also slightly different between browsers (IE, Firefox. Chrome)

                  I'm very new to EA and espacially coding.. So newbe friendly might be good

                  Thanks!

                   

                  Here is the code:

                   

                  // CompositionReady

                   

                  sym.createsym = function(){

                   

                  var position = sym.$("box").show();

                  var position2 = sym.$("text").show();

                    position.css({

                      top:sym.posY, left:sym.posX

                    });

                      position2.css({

                      top:sym.posY, left:sym.posX

                    });

                  };

                   

                  // Stage.mousemove

                  sym.posX = e.pageX + 30;

                  sym.posY = e.pageY;

                   

                  sym.createsym();

                  • 6. Re: Cursor misalignment with responsive drag and drop.
                    robboerman Level 4

                    the scale option of responsive will not work with the draggable boxes.

                    that is because the stage is scaling but the cursor isn't scaling.

                    in your case you could make the stage bases on % ( 100% ) and it will probably work with that.

                     

                    - Rob

                    1 person found this helpful
                    • 8. Re: Cursor misalignment with responsive drag and drop.
                      cyclux Level 1

                      Thank's for your reply Rob!

                       

                      Setting the stage to 100% is static. This works, thats right.. But is there realy no other solution?

                      Responsivness is crucial to my project because I need 100% width on all window resolutions. Is there maybe a possibility to access a script or variable outside of the EA stage which fetches the coordinates of the cursor?

                       

                      To clear: I don't want to use draggable boxes.. Just display the box next to the cursor as in my example:

                      http://sandbox.junglecrowd.org/responsive/publish/web/responsive.html

                       

                      Thanks

                      Alex

                      • 9. Re: Cursor misalignment with responsive drag and drop.
                        robboerman Level 4

                        it will never work with the scale responsive:

                        what it does is scale it with this css code

                        -webkit-transform: scale(1.48828125);

                         


                        in the html the cursor and the box will sync still 100% perfectly only the css makes it look different to you.

                        so you will have to work static or adaptive.

                        check out this for adaptive http://www.edgedocks.com/content/2013/12/design-responsively-animate-adaptive-layouts-edge -commons

                        it's pretty awesome

                         

                        - Rob

                        1 person found this helpful
                        • 10. Re: Cursor misalignment with responsive drag and drop.
                          cyclux Level 1

                          Thanks! I understand the problem better now..

                          Adaptive layout could be an option.. but it wouldnt be the best solution because there would nearly always be a truncated right side of the stage, because I really need 100% of the window filled with 100% of the stage.

                           

                          Is there maybe another solution to display a symbol next to another symbol without the need to "hard code" the coordinates? In my project I will have hundreds of symbols to which (by mouseover) there should appear dynamic content next to each ofthem. Would be lot of work to set the coordinates for each and every symbol

                           

                          Thanks, Alex

                          • 11. Re: Cursor misalignment with responsive drag and drop.
                            cyclux Level 1

                            Heureka! It's possible, I found out a solution...

                             

                            I take the window width and make a ratio variable with the stage width... Then the stageratio gets multiplicated with the coordinates... On window resize the variables are recalculated..  here's a working example:

                             

                            http://sandbox.junglecrowd.org/responsive_works/publish/web/responsive.html

                             

                            Here's the code:

                             

                            // CompositionReady

                             

                            sym.xycompensation = function() {

                            var stage = sym.$('Stage');

                            var parent = sym.$('Stage').parent();

                            var parentWidth = stage.parent().width();

                            var stageWidth = stage.width();

                            sym.scaleratio = stageWidth/parentWidth;

                            };

                             

                            sym.xycompensation();

                             

                            $(window).on('resize', function(){

                            sym.xycompensation();

                            });

                             

                            sym.infolabel = function(){

                            var position = sym.$("box").show();

                            var position2 = sym.$("text").show();

                              position.css({

                                top:sym.posY, left:sym.posX

                              });

                                position2.css({

                                top:sym.posY, left:sym.posX

                              });

                            };

                             

                            // Stage.mousemove

                             

                            sym.posX = e.pageX * sym.scaleratio + 30;

                            sym.posY = e.pageY * sym.scaleratio;

                             

                            sym.infolabel();

                            • 12. Re: Cursor misalignment with responsive drag and drop.
                              resdesign Adobe Community Professional & MVP

                              Awesome! This will help a lot o people!

                              • 13. Re: Cursor misalignment with responsive drag and drop.
                                lesarmientob

                                Hi! I'm having some trouble with this kind of compositions, the code is not working for me.  cyclux could you post your example once again? it seems that the link is actually broken.

                                 

                                I don't know what I'm doing wrong. Please help me!!

                                • 14. Re: Cursor misalignment with responsive drag and drop.
                                  jungle_crowd

                                  Hey lesarmientob,

                                  it's a bit late and maybe won't need it anymore but here are the project files and a working link:

                                  Working Example

                                  http://sandbox.junglecrowd.org/edge/responsive.rar

                                   

                                  Greets

                                  • 15. Re: Cursor misalignment with responsive drag and drop.
                                    bustedvillain

                                    Is it possible to merge this code using jquery-ui draggable plugin?. I've tried several times, but it seems like the properties of the object (left, top) can not be modified while dragging.

                                    • 16. Re: Cursor misalignment with responsive drag and drop.
                                      jungle_crowd Level 1

                                      Hello, sorry I can't tell you if this solution is adaptable to draggable plugin. Maybe someone else here with better coding experiences can help you..

                                      • 17. Re: Cursor misalignment with responsive drag and drop.
                                        bustedvillain Level 1

                                        Actually I've come with the right solution, indeed I could merge this code with the dragging event of Jquery-UI that lets you manipulate the coordinates. I leave the result down here. Thank you for all your help! This post was so really helpful!!

                                         

                                         

                                        Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {
                                                  // insert code to be run when the composition is fully loaded here
                                               
                                                  sym.xycompensation = function() {
                                                  var stage = sym.$('Stage');
                                                  var parent = sym.$('Stage').parent();
                                                  var parentWidth = stage.parent().width();
                                                  var stageWidth = stage.width();
                                                  sym.scaleratio = stageWidth/parentWidth;     
                                                  // Works in case you are using a ResponsiveScaling:Both && CenterStage:Both configuration
                                                  sym.surplusX = (windowSize().width - parent.width()) / 2;
                                                  sym.surplusY = (windowSize().height - parent.height()) / 2;
                                                
                                                  function windowSize() {
                                                            var w = window.innerWidth
                                                          || document.documentElement.clientWidth
                                                          || document.body.clientWidth;

                                         

                                                             var h = window.innerHeight
                                                                            || document.documentElement.clientHeight
                                                                            || document.body.clientHeight;
                                                             return {
                                                                    width : w,
                                                                    height: h
                                                             }
                                                        }
                                                
                                                  };
                                                
                                                  sym.xycompensation();
                                                
                                                  $(window).on('resize', function(){
                                                       sym.xycompensation();
                                                  });   
                                                 
                                               });
                                               //Edge binding end

                                        Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

                                                    yepnope({nope: ['jquery-ui-1.10.4.custom.min.js', 'jquery.ui.touch-punch.min.js'], complete: init});

                                                   

                                                    function init() {

                                                        //Use the code! Draggable! Droppable!!

                                                 

                                                       //To the draggable objetcs

                                                       $(".drag").draggable({
                                                                  drag: function( event, ui ) {

                                                                      //Set the cursor in the middle of the object
                                                                      var objectWidth = $(this).css("width");
                                                                      objectWidth = Number(objectWidth.substring(0, objectWidth.length-2))/2; 
                                                                      var objectHeight = $(this).css("height");
                                                                      objectHeight = Number(objectHeight.substring(0, objectHeight.length-2))/2;   

                                                                                       

                                                                      //Re-calculate the coordinates
                                                                      sym.posX = (event.pageX * sym.scaleratio) - objectWidth - sym.surplusX;
                                                                      sym.posY = (event.pageY * sym.scaleratio) - objectHeight - sym.surplusY;

                                                                     

                                                                      //Set the right coordinates throught the ui object
                                                                      ui.position.top = sym.posY; 
                                                                      ui.position.left = sym.posX;                     
                                                                    }
                                                       });

                                         

                                                   

                                         

                                         

                                                });

                                                //Edge binding end

                                         

                                         

                                         

                                         

                                                     

                                        • 18. Re: Cursor misalignment with responsive drag and drop.
                                          chwac88205879 Level 1

                                          Thanks for all the answers above. I've mad a little arrangement and this solution works in my case. Here's the code:

                                           

                                          /*------------------------------------------

                                          stage -> compositionReady

                                          ------------------------------------------*/

                                          sym.xycompensation = function() {

                                            var stage = sym.$('Stage');

                                            var parent = stage.parent();

                                            var parentWidth = stage.parent().width();

                                            var stageWidth = stage.width();

                                            sym.scaleratio = stageWidth/parentWidth;    

                                            function windowSize() {

                                            var w = window.innerWidth

                                            || document.documentElement.clientWidth

                                            || document.body.clientWidth;

                                           

                                           

                                            var h = window.innerHeight

                                            || document.documentElement.clientHeight

                                            || document.body.clientHeight;

                                            return {

                                            width : w,

                                            height: h

                                            }

                                            }

                                          };

                                          sym.xycompensation();

                                           

                                          /*------------------------------------------

                                          stage ->resize

                                          ------------------------------------------*/

                                          sym.xycompensation();

                                           

                                          /*------------------------------------------

                                          stage ->creationComplete

                                          ------------------------------------------*/

                                          sym.$('whatever').draggable({

                                            drag: function(event,ui) {

                                            //Set the cursor in the middle of the object

                                            var objectWidth = $(this).css("width");

                                            objectWidth = Number(objectWidth.substring(0, objectWidth.length-2))/2; 

                                            var objectHeight = $(this).css("height");

                                            objectHeight = Number(objectHeight.substring(0, objectHeight.length-2))/2;  

                                            //Re-calculate the coordinates

                                            sym.posX = (event.pageX * sym.scaleratio) - objectWidth;

                                            sym.posY = (event.pageY * sym.scaleratio) - objectHeight;

                                            //Set the right coordinates throught the ui object

                                            ui.position.top = sym.posY; 

                                            ui.position.left = sym.posX;                     

                                            }

                                          });

                                          1 person found this helpful