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 相关文章推荐
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 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中文验证码实现方法
2015/06/18 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
javascript中的new使用
2010/03/20 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
使用python分析git log日志示例
2014/02/27 Python
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
简单介绍Python中的JSON模块
2015/04/08 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
市场营销专业毕业生求职信
2014/03/26 职场文书
婚前财产公证书
2014/04/10 职场文书
团支部推优材料
2014/05/21 职场文书
酒后驾车标语
2014/06/30 职场文书
工作自我评价范文
2015/03/05 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
二手房购房意向书
2015/05/09 职场文书
超级礼物观后感
2015/06/15 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
Tomcat配置访问日志和线程数
2022/05/06 Servers