// 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. 拖放结束,去掉样式draggedsrc.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(); //阻止默认事件}