JQuery Faites glisser et déposer et enfiler jusqu'à la grille à KineticJs

Question

hey je mettez en place les opérations de glisser-déposer en utilisant kineticjs Maintenant, je veux que les images se blottissent s'ils se rapprochent .. J'ai vu les animaux sur l'exemple de la plage à Kineticjs qui n'était aucune aide pour ma fonctionnalité Ensuite, la JQuery Snap to Grid Thing..mais si j'utilise cela, alors je devrai me débarrasser de Kineticjs .is Toute façon de mettre en œuvre des propres jquy Snap sur les éléments de Kineticjs Cause dans JQuery, ils ont passé l'identifiant de l'IMG pour le rendre dragouble, puis snaper. Alors, comment puis-je utiliser cela avec mes images kinetic.js

jQuery druggable: http://jqueryui.com/demos/draggable/#snap-to

kinetic.js: http://www.kineticjs.com/

merci

ashish

Answer 1

Si vous allez faire quelque chose qui s'enclenche à une grille NXM, vous souhaitez ajouter un auditeur qui appelle une fonction qui le glisse.Vous voudrez probablement le faire à "Dragend"

http://www.html5canvastorials.com/ kineticjs / html5-canvas-drag-and-gouttes-événements-didacticiel /

  box.on("dragend", function(){
    snaptogrid(box);
  });

... 100x100 grille pour carreaux carrés

  function snaptogrid(YourObject){
     YourObject.x = Math.floor(YourObject.x/100) * 100 + 50;
     YourObject.y = Math.floor(YourObject.y/100) * 100 + 50;
  }

EX: Si vous avez votre objet.x= 325, vous aurez alors math.floor (3.25) * 100 + 50= 350. La gauche et le haut doivent tous deux être à 300, tandis que le centre est à 350.

Modifier, Oops manquait une partie de la question.Pour claquer à d'autres carrés, voici ce que je ferais:

function snaptoOther(YourSquares, index){
   var lastone = YourSquares.length-1;
   var maxDist = 125;
   var minDist = 75;
   var squarelength = 100;

   for(var i=0; i<lastone; i++)
   {
     var checkx = abs(YourSquares[index].x - YourSquares[i].x);
     var checky = abs(YourSquares[index].y - YourSquares[i].y);
     var multiplyX = Math.round((YourSquares[index].x - YourSquares[i].x)/squarelength);
     var multiplyY = Math.round((YourSquares[index].y - YourSquares[i].y)/squarelength);

      if(checkx < maxDist && checkx > minDist && i !== index)
        {
          YourSquares[index].x = YourSquares[i].x + multiplyX*squarelength;
        }
      if(checky < maxDist && checky > minDist && i !== index)
        {
          YourSquares[index].y = YourSquares[i].y + multiplyY*squarelength;
        }
   }
}

Answer 2

Je crée d'abord la grille

    var grid = new Array(gridSize);
    for (var row = 0; row < gridSize; row++) {
      grid[row] = new Array(gridSize);// the columns
    }

i ensuite obtenir la cellule

   function current_cell(mousePos) {
      var x = mousePos.x + half_column_width;
      var y = mousePos.y + half_column_height;
      if ( (x < column_width) || (y < column_height) || (x > board_width + column_width) || (y > board_height + column_height) ) {
        return false;
      }
      x = Math.min(x, (board_width * column_width) + column_width);
      y = Math.min(y, (board_height * column_height) + column_height);
      cell_x = Math.floor(x / column_width);
      cell_y = Math.floor(y / column_height);
      if (grid[cell_x][cell_y] == undefined) { 
        grid[cell_x][cell_y] = {};
      }
      var cell = grid[cell_x][cell_y];
      cell.cell_x = cell_x;
      cell.cell_y = cell_y;
      cell.x = cell_x * piece_width;
      cell.y = cell_y * piece_height;
      return cell;
    }

Puis sur Mousemove

shape.on('dragmove', function() {

  var mousePos = stage.getMousePosition();
  cell = current_cell(mousePos)
  shape.setPosition(cell.x, cell.y);
});