To be able to drag cards or subcolumns around we need some more event listeners added to the canvas, for mousedown, mousemove and mouseup events. If you add those and inside each handler function put a console.log ("mousedown"); (or the other 2) you will easily see in the browser's developer console that mousedown followed by mouseup also generates a click event, even if there is a long interval between down and up. That means we no longer want the click event listener. The contents of our onClick() function need to be split between the down and up handlers, like this:
function onMousedown (e)
{ console.log ("mousedown");
var xy = getMousePoint (e);
var target = findTarget (xy.x, xy.y, GAME.targets);
if (null === target) return;
var card = target.card;
if (!card.faceUp) return;
var cards = card.column.getSublist (card.columnIndex);
// array of cards, not a Column
if (!isMovable (cards)) return;
GAME.mouse = {x0:xy.x, y0:xy.y, cards:cards};
}
function onMousemove (e)
{ console.log ("mousemove");
// TO DO
}
function onMouseup (e)
{ console.log ("mouseup");
var cards = GAME.mouse.cards;
var card = cards [0];
for (const COL of GAME.COLUMNS)
{ var last = COL.getLastCard ();
if (null !== last)
{ if (last.suit === card.suit && last.value - 1 === card.value)
{ recordHistory ();
for (var i = cards.length - 1; i >= 0; i--)
{ cards [i].column.removeCard (cards [i]); }
for (i = 0; i < cards.length; i++) COL.addCard (cards [i]);
GAME.game.draw ();
return;
} } } // Not exact match, so try value match only (not suit):
for (const COL of GAME.COLUMNS)
{ var last = COL.getLastCard ();
if (null !== last)
{ if (last.value - 1 === card.value)
{ recordHistory ();
for (var i = cards.length - 1; i >= 0; i--)
{ cards [i].column.removeCard (cards [i]); }
for (i = 0; i < cards.length; i++) COL.addCard (cards [i]);
GAME.game.draw ();
return;
} } } // Is there an empty column to move to?
for (const COL of GAME.COLUMNS)
{ if (null === COL.getLastCard ())
{ recordHistory ();
for (var i = cards.length - 1; i >= 0; i--)
{ cards [i].column.removeCard (cards [i]); }
for (i = 0; i < cards.length; i++) COL.addCard (cards [i]);
GAME.game.draw ();
return;
} }
GAME.mouse = null;
}
So onMousedown() finds the card clicked on (if any) and onMouseup() places the card or sublist in the new position (if any). The only new thing here is the object GAME.mouse that is used to pass data from the down handler to the up. It records not just the target card but also the initial mouse position. That position is not needed in the up handler but it will be needed when the mouse moves. After the up event we discard the data so further movement does not try to use them.
For the mousemove events we will need to redraw the sublist in the new positions. This is where we need to change sublist to subcolumn, so Column.draw() can be used.