发现了一个小知识点:
var members=document.querySelectorAll('#member li');
members 是nodelist 对象,而不是数组,有长度,但是不能遍历,解决方法是
[].forEach.call(members,function(member) {
if(text==member.textContent){
member.parentNode.removeChild(member);
}
});
要注意的地方
dragstart 中触发的源要设置动作 ev.effectAllowed='move';
dragover 目标源中还要设置动作保持一致 ev.dataTransfer.dropEffect='move';
dropEffect属性
其中,通过dropEffect属性可以知道被拖动的元素能够执行哪种行为。这个属性的四个值如下:
none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move:应该把拖动的元素移动到放置目标。
copy:应该把拖动的元素复制到放置目标。
link:放置目标会打开拖动的元素(但拖动的元素必须是个链接,有URL地址)。
把元素拖动到放置目标上的时候,以上每一个值都会导致光标显示为不同的符号。
effectAllowed属性
光有dropEffect属性是不咋管用的。只有结合effectAllowed属性一起使用才能发挥功效。effectAllowed属性表示允许拖动元素的哪种行为(dropEffect)。effectAllowed属性也有很多值,其值如下:
uninitialized:没有给被拖动元素设置任何放置行为。
none:被拖动的元素不能有任何行为。
copy:只允许值为”copy”的dropEffect。
link:只允许值为”link”的dropEffect。
move:只允许值为”move”的dropEffect。
copyLink:允许值为”copy”和”link”的dropEffect。
copyMove:允许值为”copy”和”move”的dropEffect。
linkMove:允许值为”link”和”move”的dropEffect。
all:允许任意dropEffect。
遗留的问题最开始写的的copy属性,自己手动删除事件源dom。但是看到了move属性,一激动,改了以后发现没有用。还是得手动删。看到张鑫旭博客中的move也是手动保存下事件源dom,最后在handleDrop()中删除掉。不知道是不是自己写错了,还是真的没有用。求高人指点
最后贴上全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>drag</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style>
#member li{
cursor:move;
}
.highlighted{
background-color: #ff0;
}
.validtarget{
background-color: #f00;
}
.log{
background-color: #fa0;
border: solid 5px #f00;
}
</style>
<body>
<p> drag these member to racer or volunteer list</p>
<ul id='member'>
<li draggable='true'>zhangying</li>
<li draggable='true'>luoqin</li>
<li draggable='true'>lyy</li>
<li draggable='true'>hongchun</li>
<li draggable='true'>jiaojiao</li>
<li draggable='true'>xiaohui</li>
</ul>
<div class='droplist'>
<fieldset id='racerField'>
<legend>Racer:</legend>
<ul id='racers'>
<li>添加到这里</li>
</ul>
</fieldset>
</div>
<div class='droplist'>
<fieldset id='volunteerField'>
<legend>volunteers:</legend>
<ul id='volunteers'>
<li>添加到这里</li>
</ul>
</fieldset>
</div>
</body>
<script>
window.οnlοad=function(){
//放名字
var racers=[];
var volunteers=[];
var deldom=null;
var members=document.querySelectorAll('#member li');
//给事件源绑定拖放开始结束时间
// members是NodeList对象,不是数组。
[].forEach.call(members,function(member) {
member.addEventListener('dragstart',handleDragStart,false);
member.addEventListener('dragend',handleDragEnd,false);
});
//给目标对象绑定事件
var racersList=document.getElementById('racers');
var volunteersList=document.getElementById('volunteers');
var list=[racersList,volunteersList];
list.forEach(function(item) {
item.addEventListener('dragenter',handleDragEnter,false);
item.addEventListener('dragleave',handleDragLeave,false);
item.addEventListener('drop',handleDrop,false);
})
racersList.addEventListener('dragover',handleDragOver,false);
volunteersList.addEventListener('dragover',handleDragOver,false);
//给目标事件边框绑定事件
var volunteerField=document.querySelector('#volunteerField');
var racerField=document.querySelector('#racerField');
var fields=[volunteerField,racerField];
[].forEach.call(fields,function(field) {
field.addEventListener('dragover',handleDragOverOut,false);
});
function handleDragStart(ev){console.log('start');
ev.effectAllowed='move';
ev.dataTransfer.setData('text/plain',ev.target.textContent);
document.getElementById('racerField').className='validtarget';
document.getElementById('volunteerField').className='validtarget';
deldom=ev.target;
return true;
}
function handleDragEnter(ev){
console.log('enter');
ev.preventDefault();//告诉浏览器当前目标是有效的放置目标。默认是无效的
ev.stopPropagation();
return false;
}
function handleDragLeave(ev){
ev.target.className='';
return false;
}
function handleDragOverOut(ev){
if(ev.target.id=='racerField'){
ev.target.className='log';
}else if(ev.target.id=='volunteerField'){
ev.target.className='log';
}
ev.stopPropagation();
return false;
}
function handleDragOver(ev){
console.log('overlist');
ev.dataTransfer.dropEffect='move';
ev.stopPropagation();
ev.preventDefault();
ev.target.parentNode.className='highlighted';
return false;
}
function handleDrop(ev){
ev.stopPropagation();
ev.preventDefault();
var dropTarget=ev.target;
var text= ev.dataTransfer.getData('text/plain');
var group=volunteers;
var list=volunteersList;
if(dropTarget.parentNode.id!='volunteers'){
group=racers;
list=racersList;
}
if(text!=null && '' !=text){
group.push(text);
group.sort();
list.innerHTML='';
group.forEach(function(text) {
var li=document.createElement('li');
li.textContent=text;
list.appendChild(li);
});
[].forEach.call(members,function(member) {
if(text==member.textContent){
member.parentNode.removeChild(member);
}
});
if(deldom){
deldom.parentNode.removeChild(deldom);
}
}
return false;
}
function handleDragEnd(ev){
racersList.className=null;
volunteersList.className=null;
racersList.parentNode.className=null;
volunteersList.parentNode.className=null;
}
}
</script>
</html>