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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
js时间控件只显示年月
Jan 08 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JavaScript工具库MyTools详解
Jan 01 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
如何在postman测试用例中实现断言过程解析
Jul 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语法(3)
2006/10/09 PHP
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Prototype Number对象 学习
2009/07/19 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
护理助产毕业生的求职信
2014/03/02 职场文书
成事在人观后感
2015/06/16 职场文书
工作简历的自我评价
2019/05/16 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL