拖放识别正在拖动的内容

Question

我对Chrome中的Drag and Drop API有疑问。

我有两个矩形div（#lepartpart和#rightpart）和两个包含文本“Blue”和“Red”的div。

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

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

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

*{
			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{
			font-size:2em;
			color:blue;
		}
		#red{
			font-size:2em;
			color:red;
		}

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

当我将蓝色文本放到左侧框#leftpart上时，它工作正常。但是，如果我将红色文本放在#leftpart中，它也会变成蓝色。如何确保矩形仅对应于各个颜色（意味着EITHER框仅转换掉落入其中的颜色。）

感谢。

Answer 1

setData和getData方法的插图！
关于这种方法需要注意的主要事项：

• draggable元素需要处理dragstart事件
• 此元素需要设置dropEffect和effectAllowed属性
• 此元素和事件是必须进行setData调用的地方。
• 放置目标元素需要处理dragover和drop事件
• 这些活动必须致电getData;在此活动之前，数据将无法使用！

<强> 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/