JS HTML5实现拖拽移动列表效果

2020-03-24 16:01:19

字体：大中小

来源：转载

供稿：网友

练习HTML5中的拖放API，实现列表拖拽移动！参考文章：JS HTML5拖拽上传图片预览HTML5拖拽移动列表实现思路：
1.循环设置每个子项的draggable属性，以及设置拖动标记（不会多个或全部子项都移动）
2.每次进入投放区，则检测时候有拖放标记，有则添加dom元素，以此类推
另一种实现思路是：可以利用拖放中DataTransfer对象作为属性，用setData()和getData()方法传递每个拖动的子项的id等数据，找到指定的子项进行移动….待实验。。。HTML：//空列表 div id="box" /div //内容列表 ul id="con" li 第1项 /li li 第2项 /li li 第3项 /li li 第4项 /li /ul JS： script function $(id) { return document.getElementById(id); var con = $("con"); var box = $("box"); var liDoms = document.getElementsByTagName("li"); var i = 0, len = liDoms.length; //循环设置每个子项的draggable属性，以及时候拖动标记 for (; i len; i += 1) { liDoms[i].draggable = 'true'; liDoms[i].flag = false; liDoms[i].ondragstart = function() { this.flag = true; liDoms[i].ondragend = function() { this.flag = false; //投放区事件 $("box").ondragenter = function(e) { e.preventDefault(); console.log('进入'); $("box").ondragover = function(e) { e.preventDefault(); console.log('移动'); $("box").ondragleave = function(e) { e.preventDefault(); console.log('离开'); $("box").ondrop = function(e) { e.preventDefault(); for (var i = 0; i liDoms.length; i += 1) { if (liDoms[i].flag) { box.appendChild(liDoms[i]); console.log('成功'); //投放区事件 $("con").ondragenter = function(e) { e.preventDefault(); console.log('进入'); $("con").ondragover = function(e) { e.preventDefault(); console.log('移动'); $("con").ondragleave = function(e) { e.preventDefault(); console.log('离开'); $("con").ondrop = function(e) { e.preventDefault(); for (var i = 0; i liDoms.length; i += 1) { if (liDoms[i].flag) { //此时获得是时box对象下li，而不是原容器的li了 $("con").appendChild(liDoms[i]); console.log('成功'); /script 效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助。更多编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：javascript通过获取html标签属性class实现多选项卡的方法

下一篇：js HTML5多图片上传及预览实例解析（不含前端的文件分割）