Grid, PointAttractor, Position

Hello guys,

I’m starting with PointAttractor and ForceFields.

My goal at this moment is to build a dynamic grid and to drag & drop a rectangle to some cell.

Until here I was able to do it, but I want to take it a little further but I don’t know how to achieve my goals (or even if it’s possible).

The code I have (and it’s ready to copy, paste and run):

		var Observable = require("FuseJS/Observable");
		//to dynamically draw the grid
		var nrColumns = Observable(4);
		var nrRows = Observable(4);
		//to get the width and height of the cell
		var cellWidth = Observable();
		var cellHeight = Observable();

		function panelPlaced(args){
			cellWidth.value = args.width;
			cellHeight.value = args.height;

		//for data on each cell
		var cells = Observable();

		for(var i = 0 ; i < nrRows.value ; i++){
			for(var j = 0 ; j < nrColumns.value ; j++){
				cells.add({x: i , y : j});
		module.exports = {
			nrColumns : nrColumns,
			nrRows : nrRows,
			cells : cells,
			panelPlaced : panelPlaced,
			cellWidth : cellWidth,
			cellHeight : cellHeight

		<!-- Class for the rectangles to be dragged -->
		<Panel ux:Class="Rect" Width="{cellWidth}" Height="{cellHeight}" X="0" Y="0">
				<SolidColor Color="Red" />
				<Stroke Width="1" Color="Black" />

		<!-- The dynamic grid -->
			<Grid RowCount="{nrRows}" ColumnCount="{nrColumns}" DefaultRow="1*" DefaultColumn="1*">
				<Each Items="{cells}">
					<Panel Placed="{panelPlaced}">
						<Rectangle Row="{x}" Column="{y}">
							<Text Value="{x,y}" Alignment="Center"/>
							<Stroke Width="1" Color="Black" />
						<PointAttractor ux:Name="cellAttract" Radius="{cellWidth}" Strength="250" Exclusive="True"/>


So, my goal is to initialize the rectangle (or rectangles) in some cell, for example the cell marked as (1,1) and other rectangle on (2,3).
And when I drag either the rectangle to other cell, I want to be able to get the information about that cell, for example if I drag a rectangle from cell (1,1) to cell (3,2), I want to know that the rectangle is now on the cell (3,2).

Can someone spread some lights on this? Is possible to get/set the “coordinates” of the rectangle based on the grid?

Thanks in advance!

Can anyone shed some light on this, please? If it’s possible or not?