对问候的思考

Question

我制作了一张互动卡。当用鼠标抓住物体并移动它时，它会立即飞回原来的位置。然后它将“粘”在鼠标光标上。单击释放。我想要更流畅的点击和拖动。卡的其余部分都可以正常工作。感谢您的提前帮助。

<!DOCTYPE html>

<title>Seasonal Greetings</title>

<style>

    canvas {
        border: #333 10px solid;
        background-image: url(images/springBackground.png);

    }
    #mydiv {
        position: absolute;
        z-index: 10;
        text-align: center;
    }
    h1 {
        color: #6433af;
        font: georgia;
    }
    p {
        color: #f442b0;
        font: arial;
    }



</style>

对问候的思考

    <p>Drag the flower into the flowerpot. Click to release.</p>
    <p>When finished, press the "END" key (or the "S" key on iMac)</p>

    <div id="mydiv">
      <img src="images/flower.png" alt="flower" style="width:150px;height:200px;">
    </div>

        <canvas id="canvas" width="630px" height="430px"></canvas>
        <a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by Freepik</a>

        <script>
    //Make the DIV element draggagle:
    dragElement(document.getElementById(("mydiv")));

    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (document.getElementById(elmnt.id + "header")) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
      } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
      }

      function dragMouseDown(e) {
        e = e || window.event;
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
      }

      function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }

<script>

    //end key
    window.addEventListener("keydown", checkKeyPressed, false);
    function checkKeyPressed(e) {
        if(e.keyCode == "83" || e.keyCode == "35") {
            ctx.font = "bold Italic 18px Arial";
            ctx.fillStyle = "#a142f4";
            ctx.fillText("Thinking of you...", 320, 280);
            ctx.fillText("Each new blossom", 320, 320);
            ctx.fillText("brings a new day.", 320, 350);
            ctx.fillText("Enjoy your day, Sherri", 320, 390);
        }
        e.preventDefault();
    }

    var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "Happy Spring", x = 150, i = 0;


    ctx.font = "50px Georgia, cursive, sans-serif"; 
    ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
    ctx.strokeStyle = ctx.fillStyle = "#ffcc00";

    (function loop() {
      ctx.clearRect(x, 0, 60, 150);
      ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
      dashOffset -= speed;                                         // reduce dash length
      ctx.strokeText(txt[i], x, 200);                               // stroke letter

      if (dashOffset > 0) requestAnimationFrame(loop);             // animate
      else {
        ctx.fillText(txt[i], x, 200);                               // fill final letter
        dashOffset = dashLen;                                      // prep next char
        x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
        ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
        ctx.rotate(Math.random() * 0.005);                         // random rotation
        if (i < txt.length) requestAnimationFrame(loop); checkKeyPressed();
      }
    })();

    </script>

springbackground.png flower.png

Answer 1

要使其正常运行，请将其附加到dragElement函数的底部：

elmnt.ondragstart = function() {
    return false;
};

这将通过拖放图片来取消浏览器的默认行为。

Javascript交互式卡出现故障

对问候的思考

1 个答案: