发现了一个小知识点：

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>