前端拖拽换位置并保存_web前端教程分享前端javascript练习题二

　　web前端教程分享前端javascript练习题，事件委托机制 ----------重要

eg：点击按钮往ul中添加li，使添加的li也有相同的事件

var obtn=document.getElementById("btn");

var olist=document.getElementById("list"); //获取ul

var oli=olist.children; //获取ul的子节点li

olist.οnclick=function(e){

var evt=e||event;

var tar=evt.target||evt.srcElement; //获取事件源

if(tar.nodeName.toLowerCase()=="li"){ 判断事件源是不是是该执行目标

console.log(tar.innerHTML); //此时不能用this，因为this指向的是ul

}

}

obtn.οnclick=function(){

for(var i=0;i<4;i++){

var lli=document.createElement("li");

lli.innerHTML="aaaa";

olist.appendChild(lli);

}

}

拖拽效果

var odiv=document.getElementsByTagName("div")[0];

odiv.οnmοusedοwn=function(e){ //按下鼠标的事件

var evt=e||event;

var lf=evt.offsetX;

var tp=evt.offsetY;

document.οnmοusemοve=function(e){ //鼠标移动事件