0 Replies Latest reply on Nov 26, 2015 11:10 AM by jonasxjonas

    Responsive drag and drop problem

    jonasxjonas

      Hi everyone,

       

      I want to to build a responsive jigsaw puzzle game and everything is working fine.

      But in the responsive version the 'snap-to-object' isn't working really well. Have anyone

      an idea?


      working fine:

      http://jonasxjonas.de/Edge/puzzle_notresponsive/index.html

      responsive Version with the problem:

      http://jonasxjonas.de/Edge/puzzle_responsive/index.html

       

      Thank you for your help : )

       

      Here is the Adobe Edge file:

      https://www.dropbox.com/s/02esgn8oihzlsvl/Puzzle_Test.zip?dl=0

       

      And this is the code I'm using:

       

      // Responsive Fix    
            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('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;
        }
      
      
        $(window).on("resize",calcZoom);
      
      
        calcZoom();
      
      
      // make an array of the draggable symbol names
      draggableEl = ['.drag'];
      // make an array of the droppable element names
      droppableEl = ['.drop'];
      // have only the first element be draggable
      
      
      
      
      // set up the droppable to accept each draggables
      for (i=0;i<droppableEl.length;i++){
        sym.$(draggableEl[i]).addClass('C'+i);
        sym.$('.C'+i).draggable({
        start: startFix,
        drag: dragFix,
        revert: 'valid'
      });
        sym.$(droppableEl[i]).droppable({
        accept:'.C'+i,   // use class for accept
        drop: handleDropEvent,
      
      
        });
      
      
      }
      
      
      k=0;
      
      
      function handleDropEvent(event, ui){
          //ui.draggable.draggable( 'disable' );
          //$(this).droppable( 'disable' );
          // place draggable where needed. could be left, top
         // ui.draggable.position( { of: $(this), my: 'left', at: 'top' } );
         ui.draggable.position( { of: $(this), my: 'center', at: 'center', } );
          ui.draggable.draggable( 'option', 'revert', false );
          k++;
          if (k==200){
          sym.getSymbol('fruit1').play();
          // play animation here.
          }
      
      
      }