Here is a simple starting point using the Tk canvas. I only show you how to drag the text, but setting up 2 side by side rectangular grids should be easy enough. You would setup the grids with rectangular regions with the correct text information stored in a hash, and when text is released 'in' a region, you can test for its correctness, or return the text to its starting point. Just store all text position data in a hash, and resets ought to be easy.

For a little primer on how to make nice clickable rectangles on a Canvas, see Tk ImageMap-color-zones

#!/usr/bin/perl
use warnings;
use strict;
use Tk;

my ($dx,$dy);
my $mw  = Tk::MainWindow->new;

$mw->fontCreate('big',
   -family=>'arial',
   -weight=>'bold',
   -size=> 10);

my $can = $mw->Scrolled('Canvas',
                 -height => 400,
         -width  => 400,
         -bg => 'black',
         -scrollbars => 'osoe',
                 -highlightthickness=>0,
         -borderwidth =>0,
                 )->pack( -fill =>'both',-expand=>1);

my $realcan = $can->Subwidget('scrolled');


my $text = 'This is some text';
$can->createText(50,50,
    -text   => $text,
    -fill =>'yellow',
    -anchor => 'nw',
    -font   => 'big',
    -tags=> ['move']
    );

$realcan->bind('move', '<1>', sub {&mobileStart();});
$realcan->bind('move', '<B1-Motion>', sub {&mobileMove();});
$realcan->bind('move', '<ButtonRelease>', sub {&mobileStop();});

MainLoop;

sub mobileStart {
      my $ev = $realcan->XEvent;
      ($dx, $dy) = (0 - $ev->x, 0 - $ev->y);
      $realcan->raise('current');
      print "START MOVE->  $dx  $dy\n";
}

sub mobileMove {
      my $ev = $realcan->XEvent;
      $realcan->move('current', $ev->x + $dx, $ev->y +$dy);
      ($dx, $dy) = (0 - $ev->x, 0 - $ev->y);
      print "MOVING->  $dx  $dy\n";
}

sub mobileStop{&mobileMove;}
[download]