1 Reply Latest reply on Feb 17, 2015 10:58 PM by julkjen

    Same calculation in drag and in drop gives different results

    julkjen

      I'm using jqueryUI drag and drop to drag an object (ventil_roerHANDLE) on the X axis, then I have another object (ventil_roer) that is repositioned acording to the first objects x positon, and I do a calculation to determine how far on the Y axis the second object should move.

       

      When I calculate in the drag function the calculation is slightly of, but when I do the same calculation in the drop function, it is correct - ant clues as to why?

       

      I now have to reposition the second object again in the drop function to get it to where it should be, causing it to "jump" slightly when dropped

       

      Link to project: Vasskrafta - interaktivt kraftverk

      click on one of the two small grey houses, and then drag on the black valve with the green arrows

       

      Here's the relevant code

       

      sym.$('ventil_roerHANDLE').draggable( //MAGASINKRAFTVERK

      {

        containment:container,

        axis: 'x',

        snap: 'draggableArea',

        snapmode: 'inner',

        snapTolerance: 10,

        drag: function( event, ui )

        {

             if(sym.MyGlobalVar_startPosition_mag == 0)

             {

                  sym.MyGlobalVar_startPosition_mag = 1;

                  sym.MyGlobalVar_yStartPosition = Math.round(sym.$('ventil_roerHANDLE').position().top);

                  sym.MyGlobalVar_xStartPosition = Math.round(sym.$('ventil_roerHANDLE').position().left);

       

                  sym.MyGlobalVar_yPrevPosition = Math.round(sym.$('ventil_roerHANDLE').position().top);

                  sym.MyGlobalVar_xPrevPosition = Math.round(sym.$('ventil_roerHANDLE').position().left);

             }

       

             //utregninger for å posisjonere den synlige ventilen

             var xPosition = Math.round(sym.$('ventil_roerHANDLE').position().left);

             var xPositionCopy = Math.round(sym.$('ventil_roer').position().left);

             var yPositionCopy = Math.round(sym.$('ventil_roer').position().top);

             var xPosChange = xPositionCopy - xPosition;

             var yPosChange = xPosChange * 0.48;

       

             var newXPos = Math.round(sym.$('ventil_roerHANDLE').position().left);

             var newYPos = Math.round((sym.$('ventil_roer').position().top) - yPosChange);

       

             sym.MyGlobalVar_newYPos = newYPos;

             sym.MyGlobalVar_newXPos = newXPos;

       

             sym.$('ventil_roer').css(

             {

             'left': newXPos,

             'top': newYPos

             });

      }

       

      sym.$('draggableArea').droppable( //MAGASINKRAFTVERK

      {

        tolerance: 'touch',

        drop: function()

        {

             //utregninger for å posisjonere den usynlige ventilen

             var xPosition = Math.round(sym.$('ventil_roerHANDLE').position().left);

             var xPositionCopy = sym.MyGlobalVar_xPrevPosition;

             var xPosChange = xPositionCopy - xPosition;

             var yPosChange = xPosChange * 0.48;

       

             var newXPos = Math.round(sym.$('ventil_roerHANDLE').position().left);

             var newYPos = Math.round((sym.$('ventil_roerHANDLE').position().top) - yPosChange);

       

             //bytt topp posisjon på den usynlige ventilen (HANDLE)

             sym.$('ventil_roerHANDLE').css(

             {

                  'top': newYPos

             });

       

             //reset prev X og Y posisjoner

             sym.MyGlobalVar_xPrevPosition = Math.round(sym.$('ventil_roerHANDLE').position().left);

             sym.MyGlobalVar_yPrevPosition = Math.round(sym.$('ventil_roerHANDLE').position().top);

       

             //flytt  ventilen til HANDLEs posisjon

             sym.$('ventil_roer').css(

             {

                  'left': sym.MyGlobalVar_xPrevPosition,

                  'top': sym.MyGlobalVar_yPrevPosition

             });

      }