javascript - 拖放识别正在拖动的内容

Question

我对 Chrome 中的拖放 API 有疑问。

我有两个矩形 div(#leftpart 和 #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 方法的说明!
该方法主要注意事项:

• 可拖动元素需要处理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
还是 Vanilla ；修改代码以解释 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/