Jquery drag and drop and snap to grid in kineticJS

Question

Hey I am implementing the drag and drop operations using Kineticjs Now I want the images to snap to each other if they get close .. I saw the animals on beach example in KineticJs which was no help to me for my functionality then saw the jquery snap to grid thing..But if I use that then I'll have to get rid of KineticJs .Is thr any way to implement jquery snap propery to the elements in kineticJs cause in jquery they have passed the id of the img to make it draggable and then snap. So how can I use this with my kinetic.js images

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

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

Thanks

Ashish

score 5 · Accepted Answer · edited Feb 03 '15 at 15:31

If you're going for something that snaps to an nxm grid you'd want to add a listener that calls a function which snaps it. You'd probably want to do this at "dragend"

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-events-tutorial/

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

... 100x100 grid for square tiles

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

ex: if YourObject.x = 325, then you'll have Math.floor(3.25)*100+50 = 350. The left and top should both be at 300, while, the center is at 350.

Edit, oops missed part of the question. For snapping to other squares, here's what I'd do:

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;
        }
   }
}

Glad to hear. I'm a big supporter of KineticJS and am happy to see that you're using it. I'd encourage you to post in the KineticJS forum to share your creation. — randompast, Mar 06 '12 at 05:04

score 0 · Answer 2 · answered Sep 29 '13 at 22:09

I first create the grid

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

I then get the cell

   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;
    }

then on mousemove

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

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

Jquery drag and drop and snap to grid in kineticJS

2 Answers2