SVG拖動 - tw511教學網

通過點選並拖動它來移動螢幕上的元素的能力。這在SVG中可以比較容易實現，如下所示。

實現程式碼如下所示 -

<html xml:lang="en" lang="en"
    xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="snap.svg-min.js"></script>
  <script type="text/javascript">
    var startX = 100;
    var startY = 100;

    function init() {
      Snap("#button").click(resetFcn);
      Snap("#buttonText").click(resetFcn);
      Snap("#circle").drag(dragMove, dragStart, dragEnd);
    }

    function resetFcn(evt) {
      Snap("#circle").attr({cx: 100, cy: 100});
    }

    function dragStart(x, y, evt) {
      // figure out where the circle currently is
      startX = parseInt(Snap("#circle").attr("cx"), 10);
      startY = parseInt(Snap("#circle").attr("cy"), 10);
    }

    function dragMove(dx, dy, x, y, evt) {
      Snap("#circle").attr({cx: (startX + dx), cy: (startY + dy)});
    }

    function dragEnd(evt) {
      // no action required
    }

  </script>
</head>

<body onload="init()">


<div style="text-align:center">
  <svg width="600" height="400" viewBox="0 0 200 200"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <circle id="circle" cx="100" cy="100" r="30"
      style="fill:#663399; stroke: black"/>

    <rect id="button" x="74" y="170"
        rx="5" ry="5" width="50" height="25"
        style="stroke:black; fill:#ddd; cursor:pointer"/>
    <text id="buttonText" x="100" y="187" class="buttonText"
      style="fill:black; stroke:none;
      font-family: sans-serif; font-size: 12pt;
      text-anchor:middle; cursor:pointer">Reset</text>
  </svg>
  </div>
</body>
</html>

程式碼下載:/upload/drag.zip