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 字符编码规则
May 04 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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/03/05 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
TensorFlow实现创建分类器
2018/02/06 Python
python如何安装下载后的模块
2020/07/03 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
自我反省检讨书
2014/01/23 职场文书
认识深刻的检讨书
2014/02/16 职场文书
师德建设实施方案
2014/03/21 职场文书
机房搬迁方案
2014/05/01 职场文书
企业环保标语
2014/06/10 职场文书
学校端午节活动方案
2014/08/23 职场文书
放射科岗位职责
2015/02/14 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
检讨书范文
2019/04/16 职场文书
python tkinter实现定时关机
2021/04/21 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技