html拖拽页面保存,html5学习记录（3）：html5实现页面的拖拽操作

• PHP教程
• LINUX教程

var div = document.getElementById('div1');

var ul = document.getElementById('div2');

var lis = document.getElementsByTagName('li');

for(var i=0; i

lis[i].draggable=true;                                                 给每一个li元素添加 draggable属性

lis[i].flag = false;                                                         设置一个标识，下面拖到投放区时用来判断

lis[i].οndragstart=function(e){                                          开始拖拽事件

e.dataTransfer.setData('text','gaga');            【火狐浏览器必须加这句】

this.flag=true;

}

lis[i].οndragend=function(e){                                            结束拖拽事件

this.flag=false;

return false;

}

}

div.οndragenter=function(e){     return false;    }       当拖拽对象进入投放区时触发

div.οndragοver=function(e){          return false;    }       拖拽对象在投放区内移动时触发

div.οndragleave=function(e){        return false;    }       离开投放区事件

div.οndrοp=function(e){                                                     拖拽对象投放在投放区时触发

for(var i=0; i

if( lis[i].flag==true ){

div.appendChild(lis[i])

}

}

return false;

}