0

如何更改此代码而不是拖动您只需单击两个元素即可交换两个元素的位置？我想通过单击一个然后另一个来交换两个图块，但是在这里您需要拖动第一个图块将其带到另一个图块然后它们将交换。

  function onPuzzleClick(e){
        if(e.layerX || e.layerX == 0){
            _mouse.x = e.layerX - _canvas.offsetLeft;
            _mouse.y = e.layerY - _canvas.offsetTop;
        }
        else if(e.offsetX || e.offsetX == 0){
            _mouse.x = e.offsetX - _canvas.offsetLeft;
            _mouse.y = e.offsetY - _canvas.offsetTop;
        }
        _currentPiece = checkPieceClicked();
        if(_currentPiece != null){
            _stage.clearRect(_currentPiece.xPos,_currentPiece.yPos,pcWidth,pcHeight);
            _stage.save();
            _stage.globalAlpha = .9;
            _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, pcWidth, pcHeight, _mouse.x - (pcWidth / 2), _mouse.y - (pcHeight / 2), pcWidth, pcHeight);
            _stage.restore();
            document.onmousemove = updatePuzzle;
            document.onmouseup = pieceDropped;
        }
    }
    function checkPieceClicked(){
        var i;
        var piece;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + pcWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + pcHeight)){
                //PIECE NOT HIT
            }
            else{
                return piece;
            }
        }
        return null;
    }
    function updatePuzzle(e){
        _currentDropPiece = null;
        if(e.layerX || e.layerX == 0){
            _mouse.x = e.layerX - _canvas.offsetLeft;
            _mouse.y = e.layerY - _canvas.offsetTop;
        }
        else if(e.offsetX || e.offsetX == 0){
            _mouse.x = e.offsetX - _canvas.offsetLeft;
            _mouse.y = e.offsetY - _canvas.offsetTop;
        }
        _stage.clearRect(0,0,width,height);
        var i;
        var piece;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            if(piece == _currentPiece){
                continue;
            }
            _stage.drawImage(_img, piece.sx, piece.sy, pcWidth, pcHeight, piece.xPos, piece.yPos, pcWidth, pcHeight);
            _stage.strokeRect(piece.xPos, piece.yPos, pcWidth,pcHeight);
            if(_currentDropPiece == null){
                if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + pcWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + pcHeight)){
                    //NOT OVER
                }
                else{
                    _currentDropPiece = piece;
                    _stage.save();
                    _stage.globalAlpha = .4;
                    _stage.fillStyle = PUZZLE_HOVER_TINT;
                    _stage.fillRect(_currentDropPiece.xPos,_currentDropPiece.yPos,pcWidth, pcHeight);
                    _stage.restore();
                }
            }
        }
        _stage.save();
        _stage.globalAlpha = .6;
        _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, pcWidth, pcHeight, _mouse.x - (pcWidth / 2), _mouse.y - (pcHeight / 2), pcWidth, pcHeight);
        _stage.restore();
        _stage.strokeRect( _mouse.x - (pcWidth / 2), _mouse.y - (pcHeight / 2), pcWidth,pcHeight);
    }
    function pieceDropped(e){
        document.onmousemove = null;
        document.onmouseup = null;
        if(_currentDropPiece != null){
            var tmp = {xPos:_currentPiece.xPos,yPos:_currentPiece.yPos};
            _currentPiece.xPos = _currentDropPiece.xPos;
            _currentPiece.yPos = _currentDropPiece.yPos;
            _currentDropPiece.xPos = tmp.xPos;
            _currentDropPiece.yPos = tmp.yPos;
4

1 回答 1

0

这是使用鼠标单击而不是拖动来交换片段的方法

在 mouseup 处理程序中：

  • 检查用户是否击中任何棋子。

  • 如果用户点击了一块并且之前没有“选择”一块，那么“选择”这块。

  • 如果用户击中一个棋子并且与先前的选择一样，则交换这两个棋子并重置棋子。

  • 如果用户在所有片段之外单击，则清除任何“选定”片段。

这是供您查看的工作代码和小提琴：http: //jsfiddle.net/m1erickson/a75xz/

<!doctype html>
<html>
<head>
<link rel="stylesheet" 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>
于 2013-03-02T20:52:40.453 回答