Making a drag & drop script

[#1]

Hello, I've been struggling trying to make something like the Drag & Drop interfaces used in (JMP Pro) SEM and Reliability Block Diagrams.

The idea is to have a pallet of "boxes" down the left side of the screen.  I want to grab one of the boxes, drag it into the center area of the screen, drop it, then go grab another box, drag & drop, etc.

I've tried several ways, including handles and mousetraps.  I can get part of the way, but not all the way. 

My latest code is shown below, using Mousetrap.  I can grab the box in the upper left of the GraphBox, and drag it around the screen, and drop it where I want it.  (It turns black when it is dropped.)  But then I can't go grab another box.  I can only move the box I just dropped.  I cannot add another box.

I'm currently building this as an Application, but happy to change that if it helps.

Script below shows what I've coded in Application Builder.  Attached file contains the entire application.

I fear there are aspects of Mousetrap and GraphBoxes and Add Graphics Scripts that I just don't grasp.  Can anyone help?

// This script is executed when a new module instance is
// created.  The pre-defined object "thisModuleInstance" refers
// to the instance object, but other objects such as boxes and
// scripts have not yet been created.  Variables declared here are
// scoped to the ModuleInstance namespace.

// This special function will receive parameters passed to CreateInstance()
OnModuleLoad({},
);

thisModuleInstance << Create Objects;

// After this point your module instance objects have been created
// and can be referred to by name (for example, "Button1").



x0=5;
y0=95;
	
	
winref = (this module instance << Get Box);
// set graph box scales
winref[framebox(1)] << xaxis(0,100);
winref[framebox(1)] << yaxis(0,100);

// draw box in upper left corner.
pen color("Green");
winref[framebox(1)] << add graphics script(
							pen color("Green");
							Line({0,90}, {10,90},{10,100}, {0,100},{0,90}));



winref[framebox(1)] << Add Graphics Script(

						Mousetrap( 

							// drag script (mouse down)
							(
								// if mouse location is within box in upper left corner, then OK to drag.
									if(
										and(
											x>=x0-5,
											y>=y0-5,
											x<=x0+5,
											y<=y0+5
											),
										(	
											// set x0 and y0 if that were true
											x0 = x;
											y0 = y;
											// redraw the box at current mouse location while mouse button is down
											winref[framebox(1)] << add graphics script(
												"Front",
												pen color("Green");
												Line({x0-5, y0-5}, {x0+5, y0-5}, {x0+5, y0+5}, {x0-5, y0+5}, {x0-5, y0-5}));
										)
									);
							),

							(
							// mouse up script
								// draw a polygon centered at the current mouse location
								winref[framebox(1)] << add graphics script(
									polygon({x0-5,y0-5},{x0+5,y0-5},{x0+5,y0+5},{x0-5,y0+5},{x0-5,y0-5})
									);
								// at this point I want to manually reposition the mouse over the original box in the
								// upper left, and grab another box.
								// Instead, all I can do is grab the box I just created and drag it somewhere else.
							)

						);


);

[#2 · Accepted solution]

You most likely do not want to keep adding new graphic scripts all the time as it will end up overwriting your If() and "flood" the framebox

You can build this in much better way, but below is one example what you could possibly do

Names Default To Here(1);

rects = {};
x0 = 5;
y0 = 95;
x = .;
y = .;

nw = New Window("Example",
	
	Graph Box(
		Frame Size(200, 200),
		Mousetrap(
			x0 = x;
			y0 = y;
		,
		p = EvalExpr(Polygon(
			{Expr(x0+5), Expr(y0-5)},
			{Expr(x0+5), Expr(y0+5)},
			{Expr(x0-5), Expr(y0+5)},
			{Expr(x0-5), Expr(y0-5)}
		));
		Insert Into(rects, Name Expr(p));
		);
		Pen color("Green");
		Line({0,90}, {10,90},{10,100}, {0,100},{0,90});
		
		If(x >= x0 - 5 & y >= y0 - 5 & x <= x0 + 5 & y <= y0 + 5,
			Pen color("Green");
			Line({x0-5, y0-5}, {x0+5, y0-5}, {x0+5, y0+5}, {x0-5, y0+5}, {x0-5, y0-5});
		);
		
		For(i = 1, i <= N Items(rects), i++,
			Pen Color("Black");
			Eval(rects[i]);
		);
	);
);

Edit: Added initialization for x and y

[#3]

IN JMP 19.03 & 18.2.2, I get:

DisplayBox[EvalContextBox]
Name Unresolved: x in access or evaluation of 'x' , x/*###*/

at line 26

In previous versions of JMP, did x&y  persist outside the mousetrap?

edit:
They "persist outside of the Mousetrap"
- but not forever. It seems they are reset when the mouse button is released:
https://community.jmp.com/t5/Discussions/Can-JMP-graphics-have-this-effect/m-p/921213/highlight/true... 

Cool, with the green rectangle, the illusion of "dragging" is very convincing ; )
Without the green rectangle, it feels much more like: add a black rectangle with every mouse click.

[#4]

I most likely had x and y initialized in memory so it wasn't working. I did update the script with the initialization of x and y and now it seems to work in new JMP session.

[#5]

Thank you @jthi (and to @hogi for your contribution)!  I should be able to adapt this for my purposes.  And I learned something about Mousetrap, Add Graphics Script, and Name Expr in the process.

The JMP Community never ceases to amaze me in responsiveness and knowledge.  Much appreciated!