javascript - ネイティブJavaScriptでドラッグ可能なdivを作成する

Question

jqueryとライブラリを使用せずに、ネイティブjavascriptで移動可能/ドラッグ可能なdivを作成したいと思います。チュートリアルや何かありますか？

Answer 1

OK、これが私が軽量展開に使用する個人的なコードです (ライブラリの使用が許可されていないか、何らかの理由でやり過ぎのプロジェクト)。まず最初に、id または実際の dom 要素のいずれかを渡すことができるように、常にこの便利な関数を使用します。

function get (el) {
  if (typeof el == 'string') return document.getElementById(el);
  return el;
}

おまけとして、get()よりも入力が短くdocument.getElementById()、コードが短くなります。

次に、ほとんどのライブラリが行っていることは、ブラウザー間の互換性であることを認識してください。すべてのブラウザーが同じように動作する場合、コードはかなり簡単です。それでは、マウスの位置を取得するためのクロスブラウザー関数をいくつか書きましょう。

function mouseX (e) {
  if (e.pageX) {
    return e.pageX;
  }
  if (e.clientX) {
    return e.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  }
  return null;
}

function mouseY (e) {
  if (e.pageY) {
    return e.pageY;
  }
  if (e.clientY) {
    return e.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  }
  return null;
}

OK、上記の 2 つの関数は同一です。確かにもっと良い書き方がありますが、今のところ (比較的) シンプルにしています。

これで、ドラッグ アンド ドロップのコードを記述できます。このコードで私が気に入っているのは、すべてが 1 つのクロージャーに取り込まれているため、グローバル変数やヘルパー関数がブラウザーに散らばっていないことです。また、コードはドラッグ ハンドルをドラッグ中のオブジェクトから分離します。これは、ダイアログ ボックスなどを作成する場合に便利です。ただし、必要ない場合は、いつでも同じオブジェクトを割り当てることができます。とにかく、ここにコードがあります：

function dragable (clickEl,dragEl) {
  var p = get(clickEl);
  var t = get(dragEl);
  var drag = false;
  offsetX = 0;
  offsetY = 0;
  var mousemoveTemp = null;

  if (t) {
    var move = function (x,y) {
      t.style.left = (parseInt(t.style.left)+x) + "px";
      t.style.top  = (parseInt(t.style.top) +y) + "px";
    }
    var mouseMoveHandler = function (e) {
      e = e || window.event;

      if(!drag){return true};

      var x = mouseX(e);
      var y = mouseY(e);
      if (x != offsetX || y != offsetY) {
        move(x-offsetX,y-offsetY);
        offsetX = x;
        offsetY = y;
      }
      return false;
    }
    var start_drag = function (e) {
      e = e || window.event;

      offsetX=mouseX(e);
      offsetY=mouseY(e);
      drag=true; // basically we're using this to detect dragging

      // save any previous mousemove event handler:
      if (document.body.onmousemove) {
        mousemoveTemp = document.body.onmousemove;
      }
      document.body.onmousemove = mouseMoveHandler;
      return false;
    }
    var stop_drag = function () {
      drag=false;      

      // restore previous mousemove event handler if necessary:
      if (mousemoveTemp) {
        document.body.onmousemove = mousemoveTemp;
        mousemoveTemp = null;
      }
      return false;
    }
    p.onmousedown = start_drag;
    p.onmouseup = stop_drag;
  }
}

offsetX/offsetY少し複雑な計算には理由があります。お気づきの場合は、マウスの位置の違いを取り、ドラッグされている div の位置にそれらを追加するだけです。マウスの位置だけを使用しないのはなぜですか? これを行うと、クリックすると div がマウス ポインターにジャンプします。これは私が望んでいない行動です。

Answer 2

これを試すことができます

HTML

<div id="one" style="height:50px; width:50px; border:1px solid #ccc; background:red;">
</div>

ドラッグ可能なdivのJSスクリプト

window.onload = function(){
    draggable('one');
};

var dragObj = null;
function draggable(id)
{
    var obj = document.getElementById(id);
    obj.style.position = "absolute";
    obj.onmousedown = function(){
            dragObj = obj;
    }
}

document.onmouseup = function(e){
    dragObj = null;
};

document.onmousemove = function(e){
    var x = e.pageX;
    var y = e.pageY;

    if(dragObj == null)
        return;

    dragObj.style.left = x +"px";
    dragObj.style.top= y +"px";
};

このデモをチェック

Answer 3

<div draggable=true ondragstart="event.dataTransfer.setData('text/plain', '12345')">
drag me
</div>

<div ondragover="return false;" ondrop="this.innerHTML=event.dataTransfer.getData('text/plain')">
drop on me
</div>