How To Change Mouse Over To Onclick

January 01, 2023 Post a Comment

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/

Baca Juga

<!doctype html>
<html>
<head>
<link  type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="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 selected
    function drawPiece(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();
    }

    function hitTest(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
    }

    function handleMouseUp(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);

      // de-highlight previous selection, if any
      drawPiece(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 here
      if(hit<0){
          drawPiece(selectedPiece,false)
          selectedPiece=-1;
          return;
      }

      // Hit!
      // if no previous selection, 
      // set selectedPiece and highlight selectedPiece
      if(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>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

Html5 Dictionary

How To Change Mouse Over To Onclick

Solution 1:

Post a Comment for "How To Change Mouse Over To Onclick"