topic Re: Making a drag & drop script in Discussions

Making a drag & drop script

JerryFish — Tue, 23 Dec 2025 20:19:23 GMT

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.
							)

						);


);

Re: Making a drag & drop script

jthi — Wed, 24 Dec 2025 06:49:49 GMT

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

Re: Making a drag & drop script

hogi — Thu, 25 Dec 2025 21:00:16 GMT

I get:

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

at line 26

do 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#M107999

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.

(view in My Videos)

Re: Making a drag & drop script

jthi — Wed, 24 Dec 2025 06:50:55 GMT

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.

Re: Making a drag & drop script

JerryFish — Wed, 24 Dec 2025 13:13:48 GMT

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!

Re: Making a drag & drop script

hogi — Thu, 25 Dec 2025 21:05:31 GMT

This is an advanced version of @jthi 's script:

- existing boxes can be dragged.

- no box is created or moved when the user clicks on an area without a box.

- the initial box at the top acts as an endless reservoir of boxes.

(view in My Videos)

Names Default To Here( 1 );

squares = {{5, 95}};
x = .;
y = .;
mouseDown = 1;
foundOne = 0;

nw = New Window( "Example", 
	
	Graph Box(
		Frame Size( 200, 200 ),
		Mousetrap(
		// find a neighboring square 
			If( mouseDown,
				x0 = x;
				y0 = y;
		
				If( N Items( squares ),
					kt = KDTable( Matrix( squares ) );
					{row, dist} = kt << K nearest rows( {1, 10}, Matrix( {x0, y0} ) );
					If( N Items( row ) & dist[1] < 10,
						If( row > 1, // keep the one at the top corner
							Remove From( squares, row[1] )
						);
						foundOne = 1;
					);
				);
			);
			mouseDown = 0;, 
			// mouse relesed -> save the square
			If( foundOne,
				Insert Into( squares, Eval List( {Eval List( {x, y} )} ) )
			);
			
			//reset
			mouseDown = 1;
			foundOne = 0;
			
		);
		
		Pen Color( "Green" );
		Line( {0, 90}, {10, 90}, {10, 100}, {0, 100}, {0, 90} ); // 1st  square to start with
		
		// dragged square 
		If( Not( Is Missing( x ) ) & foundOne, 

			Line( {x - 5, y - 5}, {x + 5, y - 5}, {x + 5, y + 5}, {x - 5, y + 5}, {x - 5, y - 5} )
		);
		

		
		For( i = 1, i <= N Items( squares ), i++,
			Pen Color( "Black" );
			Eval(
				{x0, y0} = squares[i];
				
				Polygon( {x0 + 5, y0 - 5}, {x0 + 5, y0 + 5}, {x0 - 5, y0 + 5}, {x0 - 5, y0 - 5} );
			);
		);
	)
);