ネイティブのjavascriptにドラッグ可能なdivを作成します。

Question

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

Answer 1

OK、軽い展開（ライブラリを使用しているプロジェクトが何らかの理由で使用できないプロジェクト）に使用する私の個人用コードです。まず最初は、最初に、私はIDまたは実際のDOM要素のいずれかを渡すことができるように、私はいつもこの便利な機能を使用します。ボーナスとして

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

を、get()はdocument.getElementById()より入力する短く、私のコードが短くなってしまいます。

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

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; 
} 

上記の2つの機能は同じです。確かにそれらを書く良い方法がありますが、私はそれを（比較的）簡単に保っています。

ドラッグアンドドロップコードを書くことができます。私がこのコードについて気に入っていることは、全てが単一のクロージャーで捕捉され、グローバル変数やヘルパー関数がブラウザを浪費することがないことです。また、コードはドラッグされているオブジェクトからドラッグハンドルを分離します。これはダイアログボックスなどを作成するのに便利です。ただし、必要でない場合は、常に同じオブジェクトを割り当てることができます。

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

あなたは

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"; 
}; 

チェックドラッグ可能なdivのために、この

HTML

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

のJsスクリプトを試すことができます。このDemo

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> 

Answer 4

このコードは、マウスの位置を補正する（ドラッグを開始するときにドラッグされたオブジェクトがジャンプしない）とタッチスクリーン/携帯電話で動作するだけでなく

var dragObj = null; //object to be moved 
 
var xOffset = 0; //used to prevent dragged object jumping to mouse location 
 
var yOffset = 0; 
 
\t 
 
window.onload = function() 
 
{ 
 
\t document.getElementById("menuBar").addEventListener("mousedown", startDrag, true); 
 
\t document.getElementById("menuBar").addEventListener("touchstart", startDrag, true); 
 
} 
 

 
function startDrag(e) 
 
/*sets offset parameters and starts listening for mouse-move*/ 
 
{ 
 
\t e.preventDefault(); 
 
\t e.stopPropagation(); 
 
\t dragObj = e.target; 
 
\t dragObj.style.position = "absolute"; 
 
\t var rect = dragObj.getBoundingClientRect(); 
 
\t 
 
\t if(e.type=="mousedown") 
 
\t { 
 
\t \t xOffset = e.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport' 
 
\t \t yOffset = e.clientY - rect.top; 
 
\t \t window.addEventListener('mousemove', dragObject, true); 
 
\t } 
 
\t else if(e.type=="touchstart") 
 
\t { 
 
\t \t xOffset = e.targetTouches[0].clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport' 
 
\t \t yOffset = e.targetTouches[0].clientY - rect.top; 
 
\t \t window.addEventListener('touchmove', dragObject, true); 
 
\t } 
 
} 
 

 
function dragObject(e) 
 
/*Drag object*/ 
 
{ 
 
\t e.preventDefault(); 
 
\t e.stopPropagation(); 
 
\t 
 
\t if(dragObj == null) return; // if there is no object being dragged then do nothing 
 
    else if(e.type=="mousemove") 
 
\t { 
 
\t \t dragObj.style.left = e.clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position 
 
\t \t dragObj.style.top = e.clientY-yOffset +"px"; 
 
\t } 
 
    else if(e.type=="touchmove") 
 
\t { 
 
\t \t dragObj.style.left = e.targetTouches[0].clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position 
 
\t \t dragObj.style.top = e.targetTouches[0].clientY-yOffset +"px"; 
 
\t } 
 
} 
 

 
document.onmouseup = function(e) 
 
/*End dragging*/ 
 
{ 
 
\t if(dragObj) 
 
\t { 
 
\t \t dragObj = null; 
 
\t \t window.removeEventListener('mousemove', dragObject, true); 
 
\t \t window.removeEventListener('touchmove', dragObject, true); 
 
\t } 
 
}

div{height:400px; width:400px; border:1px solid #ccc; background:blue; cursor: pointer;}

<div id="menuBar" >A</div>