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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
React实现动效弹窗组件
Jun 21 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
使用python画社交网络图实例代码
2019/07/10 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
化工专业应届生求职信
2013/11/08 职场文书
中学教师培训制度
2014/01/31 职场文书
募捐倡议书
2014/04/14 职场文书
财务会计求职信范文
2015/03/20 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers