How To Change Mouse Over To Onclick
How can I change this code instead of dragging you just click two elements to exchange the position of the two elements? I wanted to exchange two tiles through clicking one then an
Solution 1:
Here’s how to swap pieces using mouse clicks instead of drags
In the mouseup handler:
Check if the user hit any piece.
If the user hit a piece and no piece was previously “selected”, then “select” this piece.
If the user hit a piece and there was as previous selection, then swap the 2 pieces and reset the pieces.
If the user clicks outside of all pieces, clear any “selected” piece.
Here is working code for you to look at and a Fiddle: http://jsfiddle.net/m1erickson/a75xz/
<!doctype html><html><head><linktype="text/css"media="all"href="css/reset.css" /><!-- reset css --><scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><style>body{ background-color: ivory; }
canvas{border:1px solid red;}
</style><script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var canvasWidth=canvas.width;
var canvasHeight=canvas.height;
// create "pieces"var selectedPiece=-1;
var pieceSize=75;
var pieces=[];
pieces.push({x:50,y:30,color:"orange"});
pieces.push({x:150,y:30,color:"green"});
pieces.push({x:250,y:30,color:"blue"});
for(var x=0;x<pieces.length;x++){
drawPiece(x,false);
}
// draw the specified piece// stroke it in red if it's selectedfunctiondrawPiece(pieceId,isStroked){
if(pieceId<0){return;}
var piece=pieces[pieceId];
ctx.save();
ctx.beginPath();
ctx.fillStyle=piece.color;
ctx.rect(piece.x,piece.y,pieceSize,pieceSize);
ctx.fill();
ctx.strokeStyle=(isStroked ? "red" : "black");
ctx.lineWidth=6;
ctx.stroke();
ctx.fillStyle="white";
ctx.font = 'italic 18px Calibri';
ctx.fillText("Box#"+pieceId,piece.x+15,piece.y+25);
ctx.restore();
}
functionhitTest(x,y){
var hit=-1;
for(var pieceId=0;pieceId<pieces.length;pieceId++){
piece=pieces[pieceId];
var isHit=!(x<piece.x || x>(piece.x + pieceSize) || y<piece.y || y>(piece.y + pieceSize));
if(isHit){
hit=pieceId;
break; // Hit! We're outta here...
}
}
return(hit); // returns piece# if hit else -1 to indicate no hits
}
functionhandleMouseUp(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// de-highlight previous selection, if anydrawPiece(selectedPiece,false)
// did we hit a piece?var hit=hitTest(canMouseX,canMouseY);
// if no-hit, the user clicked outside a box// so clear the selectedPiece and we're outta hereif(hit<0){
drawPiece(selectedPiece,false)
selectedPiece=-1;
return;
}
// Hit!// if no previous selection, // set selectedPiece and highlight selectedPieceif(selectedPiece<0){
selectedPiece=hit;
drawPiece(selectedPiece,true);
}
// else, there was a piece already selected// so swap these pieces!else{
var s=pieces[selectedPiece];
var h=pieces[hit];
var temp={x:s.x, y:s.y};
s.x=h.x;
s.y=h.y;
h.x=temp.x;
h.y=temp.y;
drawPiece(selectedPiece,false);
drawPiece(hit,false);
selectedPiece=-1; // clear
}
} // end handleMouseDown()
$("#canvas").mouseup(function(e){handleMouseUp(e);});
}); // end $(function(){});</script></head><body><br/><p>Click once to select a box</p><p>Click a second box to swap the boxes</p><canvasid="canvas"width=400height=300></canvas></body></html>
Post a Comment for "How To Change Mouse Over To Onclick"