Jquery拖放并捕捉到动力学JS中的网格答案

【问题标题】：Jquery drag and drop and snap to grid in kineticJSJquery拖放并捕捉到动力学JS中的网格
【发布时间】：2012-03-18 15:41:37
【问题描述】：

嘿，我正在使用 Kineticjs 实现拖放操作现在我希望图像靠近时相互捕捉.. 我在 KineticJs 中看到了海滩上的动物示例，这对我的功能没有帮助然后看到 jquery snap to grid 的东西..但是如果我使用它，那么我将不得不摆脱 KineticJs 。是否有任何方法可以将 jquery snap 属性实现到 kineticJs 中的元素因为在 jquery 中他们已经传递了 img 的 id 以使其可拖动然后捕捉。那么如何在我的 kinetic.js 图片中使用它

jquery 可拖动：http://jqueryui.com/demos/draggable/#snap-to

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

谢谢

阿什

【问题讨论】：

标签： jquery image drag-and-drop kineticjs

【解决方案1】：

如果你想要捕捉到一个 nxm 网格的东西，你会想要添加一个监听器来调用一个捕捉它的函数。您可能希望在“dragend”处执行此操作

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

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

...方形瓷砖的 100x100 网格

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

例如：如果 YourObject.x = 325，那么 Math.floor(3.25)*100+50 = 350。左侧和顶部都应为 300，而中心应为 350。

编辑，哎呀错过了部分问题。为了捕捉到其他方块，我会这样做：

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

【讨论】：

谢谢..帮忙..知道了..:)
很高兴听到。我是 KineticJS 的忠实支持者，很高兴看到您正在使用它。我鼓励你在 KineticJS 论坛上发帖分享你的创作。
我一完成就一定会做的。非常感谢:)

【解决方案2】：

我先创建网格

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

然后我得到单元格

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

然后鼠标移动

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

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

【讨论】：