我对 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 框只变成掉落到其中的颜色。)
谢谢。
最佳答案
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);
});
}
关于javascript - 拖放识别正在拖动的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38795955/