dadc

// 1.获得目标
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");

//拖动中的对象的id;
var draggedID;

// 一、 拖动区
	// 1.开始拖动，获得当前对象的id存放在变量draggedID中，增加样式dragged样式
	src.ondragstart = function(e) {
		draggedID = e.target.id;
		e.target.classList.add("dragged");  //补充：classList:返回元素的类名，用于在元素中添加、移除及切换css类
		// console.log(draggedID);          //       classList只读，add(),remove()方法修改
	}
	
	// 2.拖动中，释放区域显示拖放对象的id;
	src.ondrag = function(e) {
		msg.innerHTML = e.target.id;
	}

	// 3. 拖放结束，去掉样式dragged
	src.ondragend = function(e) {
		var elems = document.querySelectorAll("dragged"); //获得所有被拖动的对象
		//去掉dragged样式		                                                  
		for (var i = 0; i < elems.length; i++) {
			elems[i].classList.remove("dragged");
		}	
	}


//  二、在释放区
	// 1.去掉浏览器事件ondragenter、ondragover的默认行为
	target.ondragenter = handleDrag;
	target.ondragover = handleDrag;

	function handleDrag(e) {
		e.preventDefault();
	}

	// 2.在释放区
	target.ondrop = function(e) {
		var newElem = document.getElementById(draggedID).cloneNode(false); //cloneNode:把一个列表复制到另一个列表
		target.innerHTML = ""; //清空列表项
		target.appendChild(newElem); //将新元素添加到释放区
		e.preventDefault(); //阻止默认事件
	}