HTML5拖放
来源:互联网 发布:瓦楞纸箱设计软件 编辑:程序博客网 时间:2024/05/22 03:13
HTML5拖放
1.被拖动元素设置为可被拖放
draggable = ‘true’
<div class="drag" id="drap1" draggable="true" ondragstart="drag(event)">drag</div>
2.规定当被拖元素被拖动时会发生的事件
ondragstart = drag(event){ }//执行这个函数
//拖动什么function drag(event){ event.dataTransfer.setData("Text",event.target.id);//dataTransfer.setData() 方法设置被拖数据的数据类型和值//数据类型是 "Text",值是可拖动元素的 id ("drag1")}
event.dataTransfer.setData(‘Text’,event.target.id);把目标元素的id存放到‘Text’里面。
3.设置另一个元素可接受被拖动数据
ondragover = allowDrop(event){ }//执行这个函数
获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
//放到何处function allowDrop(event){ event.preventDefault();//消除默认(元素不可以接受另一个元素)属性}
消除系统对元素的默认(不允许接收另一个元素)属性
4.当松开鼠标时会发生的事件
//进行放置 function drop(event){ event.preventDefault();//消除默认(浏览器对被拖元素以链接的方式打开)属性 var data = event.dataTransfer.getData("Text");//得到被拖元素的id event.target.appendChild(document.getElementById(data));// event.target.removeChild(document.getElementById(data)); }
5.实现来回拖动就是把放置目标(被拖动元素)的元素属性设置为可接收元素
在放置目标的元素内加上ondrop属性和ondragover属性即可
event.preventDefault();消除浏览器的默认属性
ondrop="drop(event)" ondragover="allowDrop(event)
阅读全文
0 0
- html5拖放
- HTML5 拖放
- HTML5拖放
- HTML5拖放
- HTML5拖放
- html5拖放
- HTML5拖放
- 【HTML5】拖放
- html5拖放
- HTML5拖放
- html5-拖放
- HTML5 拖放
- HTML5拖放
- HTML5--拖放
- HTML5 拖放
- HTML5拖放
- HTML5 拖放
- HTML5拖放
- SpringMVC实现查询结果下载为CSV文件
- [python]leetcode(105). Construct Binary Tree from Preorder and Inorder Traversal
- 直接插入、冒泡、快速、简单选择、堆、归并排序算法
- JVM内存区域和内存溢出异常
- 3301: [USACO2011 Feb] Cow Line 康托展开
- HTML5拖放
- 属性动画的几种实现方式
- hdu 5428(质因数分解)
- 重定向和请求转发的区别
- 【内外网映射】通过外网ip来访问虚拟机服务器【转载】
- (初学者)关于Python学习中Windows环境中遇到的info-zip问题的解决
- 英特尔® 嵌入式显卡驱动程序
- http 无连接 无状态
- 树和二叉树(一)