■ drag & drop　[JavaScript版]

　Javaには drag & drop に対応するイベントと対応する関数があるが、JavaScriptにはない。
　従って、JavaScriptでは一寸した作業が必要となる。

（１）drag中を示すflag： pressF = 0/1 を準備する。
（２）drag中のmouse座標を格納する： pressX, pressY
（３）下記EventListenerを登録する（具体的な関数は後述）。
　　　・canvas.addEventListener("mousedown" , mousePressed);
　　　・canvas.addEventListener("mouseup" , mouseReleased);
　　　・canvas.addEventListener("mousemove" , mouseMoved);

　ここでは、mouse drag & drop で正方形を移動する例を示す。

---

---

●プログラム抜粋

  var xpos, ypos; // mouse pos.
  var pressF = 0;
  var pressX, pressY;

  canvas.addEventListener("mousedown" , mousePressed);
  canvas.addEventListener("mouseup" , mouseReleased);
  canvas.addEventListener("mousemove" , mouseMoved);

//............................
  function mouseMoved(ee) {
//............................
    getPos(ee);
    if(pressF == 0) return;

    xp += xpos - pressX;
    yp += ypos - pressY;
    paint();
    pressX = xpos; pressY = ypos;
  }

//............................
  function mousePressed(ee) {
//............................
    getPos(ee);
    pressF = 1; pressX = xpos; pressY = ypos;

    paint();
  }

//............................
  function mouseReleased(ee) {
//............................
    getPos(ee);
    pressF = 0;
    paint();
  }

//..........................
  function getPos(e) {
//..........................
    var rect = e.target.getBoundingClientRect();
    xpos = e.clientX - rect.left;
    ypos = e.clientY - rect.top;
  }