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


Posted in Javascript onAugust 27, 2020

练习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>

效果图:

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

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

Javascript 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
javascript preload&amp;lazy load
May 13 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 #Javascript
浅析JavaScript中的array数组类型系统
Jul 18 #Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 #Javascript
javascript时间差插件分享
Jul 18 #Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 #Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 #Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 #Javascript
You might like
php xml 入门学习资料
2011/01/01 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
详解VUE 数组更新
2017/12/16 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python Tornado框架的使用示例
2020/10/19 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
结婚邀请函范文
2014/01/14 职场文书
班风口号
2014/06/18 职场文书
开发房地产协议书
2014/09/14 职场文书
四风问题对照检查材料
2014/09/22 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2015年教师业务工作总结
2015/05/26 职场文书