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编程中的对象概念
Oct 21 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
javascript每日必学之多态
Feb 23 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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函数utf8转gb2312编码
2006/12/21 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python将时分秒转换成秒的实例
2019/12/07 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
教学器材管理制度
2014/01/26 职场文书
人事助理自荐信
2014/02/02 职场文书
小区推广策划方案
2014/06/06 职场文书
节约用水的口号
2014/06/20 职场文书
婚礼父母答谢词
2015/01/04 职场文书
党员进社区活动总结
2015/05/07 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS