Jquery drag and drop and snap to grid in kineticJS
嘿,我正在使用Kineticjs实现拖放操作
现在,如果图像彼此靠近,我希望它们彼此捕捉..
我在KineticJs中看到了海滩上的动物,这对我的功能没有帮助
然后看到了jquery snap到网格的东西。。但是,如果我使用它,那我就必须摆脱KineticJs。这是对dynamicJs中的元素实现jquery snap属性的任何方法
因为在jquery中,他们已经传递了img的ID,使其可拖动,然后捕捉。
那么如何将其与我的dynamic.js图片一起使用?
可拖动的jquery:http://jqueryui.com/demos/draggable/#snap-to
kinetic.js:http://www.kineticjs.com/
谢谢
浓淡
如果要使用可捕捉到nxm网格的对象,则需要添加一个侦听器,该侦听器调用可捕捉其功能的函数。您可能想在" dragend "
上执行此操作
http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-events-tutorial/
1 2 3 | box.on("dragend", function(){ snaptogrid(box); }); |
...用于正方形瓷砖的100x100网格
1 2 3 4 | function snaptogrid(YourObject){ YourObject.x = Math.floor(YourObject.x/100) * 100 + 50; YourObject.y = Math.floor(YourObject.y/100) * 100 + 50; } |
ex:如果YourObject.x = 325,则您将具有Math.floor(3.25)* 100 50 =350。左侧和顶部均应为300,而中心应为350。 >
编辑,哎呀错过了部分问题。要捕捉到其他正方形,这是我要做的事情:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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; } } } |
我首先创建网格
1 2 3 4 | var grid = new Array(gridSize); for (var row = 0; row < gridSize; row++) { grid[row] = new Array(gridSize);// the columns } |
然后我得到单元格
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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; } |
然后在鼠标移动
1 2 3 4 5 6 | shape.on('dragmove', function() { var mousePos = stage.getMousePosition(); cell = current_cell(mousePos) shape.setPosition(cell.x, cell.y); }); |