| 标题 | JS HTML5实现拖拽移动列表效果 |
| 内容 | 这篇文章主要为大家详细介绍了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> 以上就是本文的全部内容，希望对大家的学习有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。