ドラッグされているものを特定するドラッグアンドドロップ

Question

ChromeのドラッグアンドドロップAPIに関する質問があります。

私は2つの矩形div（#leftpartと#rightpart）と2つのdivに "Blue"と "Red"という文字列を含んでいます。

var blue = document.getElementsByTagName('DIV')[3] 
 

 
function changeBlue(e){ 
 
\t e.preventDefault() 
 
\t if(e.type == "drop") 
 
\t e.target.className = "blue" 
 
} 
 

 
leftpart.addEventListener("dragover",changeBlue); 
 
leftpart.addEventListener("drop",changeBlue);

*{ 
 
\t \t \t box-sizing: border-box; 
 
\t \t } 
 

 
\t \t #box{ 
 
\t \t \t border:1px solid black; 
 
\t \t \t width:600px; 
 
\t \t \t height:400px; 
 
\t \t \t margin:auto; 
 
\t \t \t position:relative; 
 
\t \t } 
 

 
\t \t #leftpart{ 
 
\t \t \t position: absolute; 
 
\t \t \t left:0; 
 
\t \t \t width:299px; 
 
\t \t \t height:398px; 
 
\t \t \t border:1px solid black; 
 
\t \t } 
 

 
\t \t #rightpart{ 
 
\t \t \t position: absolute; 
 
\t \t \t right:0; 
 
\t \t \t width:299px; 
 
\t \t \t height:398px; 
 
\t \t \t border:1px solid black; 
 
\t \t } 
 

 
\t \t .blue{ 
 
\t \t \t background-color : blue; 
 
\t \t } 
 

 
\t \t .red{ 
 
\t \t \t background-color :red; 
 
\t \t } 
 
\t \t #blue{ 
 
\t \t \t font-size:2em; 
 
\t \t \t color:blue; 
 
\t \t } 
 
\t \t #red{ 
 
\t \t \t font-size:2em; 
 
\t \t \t color:red; 
 
\t \t }

<div id="box"> 
 
\t <div id="leftpart"></div> 
 
\t <div id="rightpart"></div> 
 
</div> 
 
<div id= "blue">Blue</div> 
 
<div id= "red">Red</div>

私はそれがfine.Butの作品、左のボックス#leftpart上にブルーのテキストをドロップすると、私は#leftpartに赤色の文字を削除した場合、それはまた青に変わります。矩形が個々の色にのみ対応していることを確認するにはどうすればいいですか（つまり、ボックス内にドロップされた色のみが変わります）

ありがとう。

Answer 1

setDataおよびgetDataの方法のイラスト！この方法について注意する
主なもの：

• ドラッグ可能な要素は、この要素は、dropEffectとeffectAllowedプロパティ
• この要素を設定する必要があり、イベント、どこでdragstartイベント
• を処理する必要がありますsetDataコールが必要です。
• ドロップ先要素は
• これらのイベントはgetDataを呼び出す必要がありdragoverとdropイベントを処理する必要があります。このイベントの前にデータを入手することはできません！

HTML
は、コードを簡単にするために、draggable属性、およびクラスを含むように変更されました。
だけでクラスの追加

<div id="box"> 
    <div id="leftpart" class="dropparts"></div> 
    <div id="rightpart" class="dropparts"></div> 
</div> 
<div id= "blue" class="colordrag" draggable="true">Blue</div> 
<div id= "red" class="colordrag" draggable="true">Red</div> 

CSSは、ドラッグ可能な項目の選択を支援します。

*{ 
    box-sizing: border-box; 
    } 

    #box{ 
    border:1px solid black; 
    width:600px; 
    height:400px; 
    margin:auto; 
    position:relative; 
    } 

    #leftpart{ 
    position: absolute; 
    left:0; 
    width:299px; 
    height:398px; 
    border:1px solid black; 
    } 

    #rightpart{ 
    position: absolute; 
    right:0; 
    width:299px; 
    height:398px; 
    border:1px solid black; 
    } 

    .blue{ 
    background-color : blue; 
    } 

    .red{ 
    background-color :red; 
    } 
    #blue{ 
    color:blue; 
    } 
    #red{ 
    color:red; 
    } 

/* Class for draggable items */ 
.colordrag { 
    /* prevents text highlights */ 
    -webkit-user-select: none; 
    font-size: 2em 
} 

JS
さらにバニラ。説明する修正コードsetDataとgetData。もう少しクリーナー。これはあなたのコードの全体

/* Create vars for blue/red divs, and 
* left/right parts. Also create vars 
* for classes. 
*/ 
var blue = document.getElementById("blue"), 
    red = document.getElementById("red"), 
    leftpart = document.getElementById("leftpart"), 
    rightpart = document.getElementById("rightpart"), 
    colordrags = document.getElementsByClassName("colordrag"), 
    dropparts = document.getElementsByClassName("dropparts"); 

/* Create function to handle the drop of 
* one element, onto another. 
* Will take in target element and event.dataTransfer object. 
*/ 
function changeColor(target, ev) { 
    document.getElementById(target.id).style.backgroundColor = ev.getData("text"); 
} 

/* Create handlers for colordrag divs to deal 
* with the dragging of elements, and 
* droppart divs to deal with dropping of 
* elements on them. 
*/ 

for(var i=0; i<colordrags.length; i++) { 
    colordrags[i].addEventListener("dragstart", function(ev) { 
    ev.dataTransfer.dropEffect = "copy"; // dropEffect and effectAllowed 
    ev.dataTransfer.effectAllowed = "all"; // set to enable datatransfer; 
    ev.dataTransfer.setData("text/plain", ev.srcElement.innerHTML); // set data as element text; 
    ev.stopPropagation(); 
    }); 
} 

for(var i=0; i<dropparts.length; i++) { 
    dropparts[i].addEventListener("dragover", function(ev) { 
    ev.preventDefault(); 
    ev.stopPropagation(); 
    return false; 
    }); 
    dropparts[i].addEventListener("drop", function(ev) { 
    ev.dataTransfer.dropEffect = "copy"; 
    ev.dataTransfer.effectAllowed = "all"; 
    ev.preventDefault(); 
    changeColor(ev.target, ev.dataTransfer); 
    }); 
} 

http://codepen.io/vulpcod3z/full/qNJGGP/