16 Replies Latest reply on Apr 29, 2016 6:19 AM by resdesign

    Jquery draggable error in responsive scaling

    zhanhui913

      I'm trying to implement a drag and drop effect by using this tutorial from Paul Trani | Drag & Drop in Edge Animate , his program works fine if my project doesnt have any responsive scaling.

      Turning the responsive scaling on to "Both" causes some miscalculations in cursor.

      I have also checked out another discussion with a similar question Cursor misalignment with responsive drag and drop.

      But the problem persists, In my document.compositionReady section I have this code to calculate the scaleRatio

       

      sym.xycompensation = function(){

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

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

        var parentWidth = parent.width();

        var stageWidth = stage.width();

       

        sym.scaleRatioWidth = stageWidth/parentWidth;

      };

       

      sym.xycompensation();

       

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

        sym.xycompensation();

      });

       

      this.drag = function(down,move,posX,posY){

        if(down){

        if(move){

        sym.$("Eyes").css({top:posY,left:posX});

        }

        }

      }

       

      In my Stage.mousemove, I have this code that updates the mouse's position relative to the scaleRatioWidth

       

      sym.posX = (e.pageX * sym.scaleRatioWidth);

      sym.posY = (e.pageY * sym.scaleRatioWidth);

       

      Lets say I have a sym call "Eyes" that I will ultimately move by dragging and dropping.

      In Eyes.mousedown, I have

       

      sym.mouseDown = 1;

       

      In Eyes.mouseup, I have

       

      sym.mouseDown  =  0;

       

      In Eyes.mousemove, I have

       

      this.drag(sym.mouseDown,1,sym.posX,sym.posY);

       

      Is there a better way to go about this?

      I would really appreciate it.

      Thanks.

        • 1. Re: Jquery draggable error in responsive scaling
          Siva. Level 3

          You can use the following . Setup for a simple stage with one "Rectangle"

           

          Dropbox - JqueryDraggable.zip

           

           

          //Relevant code

           

           

          (function($, Edge, compId) {

              var Composition = Edge.Composition,

                  Symbol = Edge.Symbol; // aliases for commonly used Edge classes

           

           

              //Edge symbol: 'stage'

              (function(symbolName) {

                  var zoomScale = 1;

                  Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

           

                      function startFix(event, ui) {

                          ui.position.left = 0;

                          ui.position.top = 0;

                      }

           

                      function calcZoom() {

                          var stage = $(sym.getSymbolElement());

           

                          var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,

                              matches = $(stage).css('-webkit-transform').match(matrixRegex);

                          console.log(parseFloat(matches[1]));

                          zoomScale = parseFloat(matches[1]);

                      }

           

                      function dragFix(event, ui) {

                          var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left

                          var newLeft = ui.originalPosition.left + changeLeft / zoomScale; // adjust new left by our zoomScale

           

                          var changeTop = ui.position.top - ui.originalPosition.top; // find change in top

                          var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale

           

                          ui.position.left = newLeft;

                          ui.position.top = newTop;

                      }

           

                      sym.$("Rectangle").draggable({

                          start: startFix,

                          drag: dragFix

                      });

           

                      $(window).on("resize", calcZoom);

           

                      calcZoom();

                  });

                  //Edge binding end

           

           

              })("stage");

              //Edge symbol end:'stage'

           

           

          })(jQuery, AdobeEdge, "EDGE-1306179121");

           

           

          Credit: JQuery Draggable fix from here

          • 2. Re: Jquery draggable error in responsive scaling
            zhanhui913 Level 1

            First of all, I want to thank you so much.

            This helped for Chrome and Safari browser, but it doesnt work well with FireFox, the object I'm dragging is still running away from the cursor.

             

            I also do have another question in regards to the revert attribute in draggable.

            The only option is either "valid" or "invalid", (the one i want is invalid, so that it goes to the original position if i mouse up).

            It is actually going back to (0,0) which is the top left corner of the screen instead of its original position.

            How would I go about this.

             

            I tried

             

            sym.$("Symbol").draggable({

                 start: startFix,

                 drag: dragFix,

                 revert: revertFix

            });

             

            function revertFix(event, ui){

                 ui.position.top = ui.startPosX;

                 ui.position.left = ui.startPosY;

            }

             

            and changing startFix to

             

            function startFix(event, ui) {

                            ui.position.left = 0;

                            ui.position.top = 0;

                           ui.startPosX = 100; //Start x position

                           ui.startPosY = 100; //start y position

            }

             

            but this didnt really work.

             

            Any ideas?

            • 3. Re: Jquery draggable error in responsive scaling
              cantanero

              Hey

               

              I don't know if you are still searching for a working fix for responsive drag and drop in edge.

              But the code that Siva posted is actually working. You just have to change ('-webkit-transform') into ('transform'). Then it should work also in Firefox and IE!

              • 4. Re: Jquery draggable error in responsive scaling
                DylanGraft Level 1

                I'm having the exact same problem. My objects are reverting to 0,0 rather than their original position when using revert: "invalid".

                 

                I was able to "kind of" solve the problem by adding a function to the revert tag.

                 

                sym.$("bottle_draggable").draggable({

                  start: startFix,

                  drag: dragFix,

                  revert: function(){

                  sym.$("bottle_draggable").animate({"left": "1477px", "top": "87px"}, "slow");

                  }

                  });

                 

                My problem is that it now reverts to those coordinates even after it is dropped in the droppable object. Any idea if there's a way to write a conditional statement that says to only revert if the droppable object hasn't been triggered? I need it to stay in the droppable container.

                 

                I feel like it's right in front of me, but my javascript is still pretty shaky and I can't seem to get an if / else statement to work.

                • 5. Re: Jquery draggable error in responsive scaling
                  amritg

                  Hi DylanGraft

                  I am stuck with the same problem you  mentioned. Did you figure out any solution for this reverts issue. It will be great help if you can give some suggestion for this issue. It reverts the objects even after it is dropped in the droppable object.

                   

                  Thanks !

                  • 6. Re: Jquery draggable error in responsive scaling
                    resdesign Adobe Community Professional & MVP

                    It would not do it this way. What is your goal? Do you want revert in invalid or something else happening?

                    The issue for responsive is that you have a problem with the top and left and the mouse, right? This does not have anything to do with the revert function.

                    • 7. Re: Jquery draggable error in responsive scaling
                      amritg Level 1

                      Thanks your attention resdesign. Basically I am working on responsive design page and I need to turn 'ON' responsive scaling for this. I was able to fix the cursor position with above codes when dragging. Now the problem arises here when I go to drop the draggable object in the droppable box. The draggable object doesn't get inside droppable box but now reverts to those initial coordinates even after it is dropped in the droppable object.

                      I find no working solution for this yet. I need to make it work.

                       

                      Alot of thanks ahead.

                      • 8. Re: Jquery draggable error in responsive scaling
                        resdesign Adobe Community Professional & MVP

                        Try this:  (I used a class for the draggable.

                        sym.$("droppable").droppable({
                            accept: '.drag',
                            drop: function(event, ui) {
                                ui.draggable.position({
                                    of: $(this),
                                    my: 'center',
                                    at: 'middle'
                                });
                            }
                        });
                        • 10. Re: Jquery draggable error in responsive scaling
                          amritg Level 1

                          Hi resDesign,

                          I still cannot make it working. I am still cannot get my head around for this issue. If you have time, then please have a look at fmy codes and suggest for the possible errors in my code. I am stuck here.

                           

                          https://drive.google.com/folderview?id=0B4CBj9FDZjylOUNJazNtYW4xak0&usp=sharing

                          • 11. Re: Jquery draggable error in responsive scaling
                            amritg Level 1

                            Hi again resDesign,

                            Thanks a lot for this sample code. By looking this sample, I hope to finish my solve my problem in this issue. I spent nearly two days to debug it. Finally through your help, I am sure i will do it now. I highly appreciate your valuable time for this one.

                             

                            I asked other few questions in this forum but no one replied and I thought its not wise to use this software any more of no community support. But nice people like you are still available here.

                            Can you look at problem 2: in this link How can I make animation page to stop jumping into next page until the full content of next page is fully loaded in ?

                            I still cannot make it work.

                             

                             

                            Thanks

                            • 12. Re: Jquery draggable error in responsive scaling
                              resdesign Adobe Community Professional & MVP

                              Check out my sample. I use code suggested in another post. Let me see what you think.

                              • 13. Re: Jquery draggable error in responsive scaling
                                resdesign Adobe Community Professional & MVP

                                Try removing the preloader. You might have a better chance using yepnope to load your assets.

                                • 14. Re: Jquery draggable error in responsive scaling
                                  resdesign Adobe Community Professional & MVP

                                  Not sure about your problem is on iOS since I cannot test on iOS right now. I guess you mean mobile.

                                  • 15. Re: Jquery draggable error in responsive scaling
                                    amritg Level 1

                                    Hi resDesign,

                                    I followed the codes in the Sample and Droppable function in working but Still there is problem with revert in invalid. The draggable box doesn't return back to its original position. Its still not working.

                                    Can you have a look at file below and make some suggestions !!

                                    I would be very grateful for that one.

                                    Thanks !

                                    https://drive.google.com/folderview?id=0B4CBj9FDZjyld3Rlc3o3Z1dkNzQ&usp=sharing

                                    • 16. Re: Jquery draggable error in responsive scaling
                                      resdesign Adobe Community Professional & MVP

                                      Hum, not sure yet how to correct this.