练习HTML5中的拖放原料药，实现列表拖拽移动！参考文章：JS HTML5拖拽上传图片预览

HTML5拖拽移动列表实现思路：1.循环设置每个子项的可拖动的属性，以及设置拖动标记（不会多个或全部子项都移动)2.每次进入投放区，则检测时候有拖放标记，有则添加数字正射影像图元素，以此类推

另一种实现思路是：可以利用拖放中数据传输对象作为属性，用setData()和getData()方法传递每个拖动的子项的编号等数据，找到指定的子项进行移动….待实验。

HTML:

//空列表div id='box'/div//内容列表ul id='con' li第一项/li li第2项/li li第3项/li li第四项/li/ulJS:

脚本函数$(id){返回文档。getelementbyid(id)；} var con=$(' con ')；var box=$(' box ')；var liDoms=文档。getelementsbytagname(' Li ')；var i=0，len=liDoms.length//循环设置每个子项的可拖动的属性，以及时候拖动标记for(；我透镜；i=1) { liDoms[i].可拖动="真";封盖.标志=虚假信息.ondragstart=function(){ this。flag=true};封盖.ondragend=function(){ this。flag=false};} //投放区事件$(“盒子”).ondragenter=function(e){ e . preventdefault()；console.log('进入');};$(“盒子”).ondragover=function(e){ e . prevent default()；console.log('移动');};$(“盒子”).ondragleave=function(e){ e . prevent default()；console.log('离开');};$(“盒子”).ondrop=function(e){ e . prevent default()；for(var I=0；长度；i=1) { if (liDoms[i]).flag){ box。阑尾切除术；} } console.log('成功');};//投放区事件$(“con”).ondragenter=function(e){ e . preventdefault()；console.log('进入');};$(“con”).ondragover=function(e){ e . prevent default()；console.log('移动');};$(“con”).ondragleave=function(e){ e . prevent default()；console.log('离开');};$(“con”).ondrop=function(e){ e . prevent default()；for(var I=0；长度；i=1) { if (liDoms[i]).标志){ //此时获得是时包厢对象下李，而不是原容器的里了$(“con”).附录1；} } console.log('成功');};/script效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助。