HTML5实现简单的拖放功能
来源:互联网 发布:零售行业数据 编辑:程序博客网 时间:2024/05/01 05:53
使用HTML5实现简单的拖放功能:
1.对象元素的draggable属性设置为true(draggable="true")。还需要注意的是a元素和img元素必须指定href;
2.编写拖拽有关的事件处理代码:
事件产生事件的元素描述dragstart被拖放的元素开始拖放操作drag被拖放的元素拖放过程中dragenter拖放过程中鼠标经过的元素被拖放的元素开始进入本元素的范围之内dragover拖放过程中鼠标经过的元素被拖放的元素正在本元素范围内移动dragleave拖放过程中鼠标经过的元素被拖放的元素离开本元素的范围drop拖放的目标元素其他元素被拖放到了本元素中dragend拖放的对象元素拖放操作结束
3.案例实现代码:
(1)HTML代码段:
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><img src="img/html5.png" id="tuo" draggable="true" ondragstart="drag(event)"/>
(2)CSS代码段:
#tuo{width: 540px;height: 320px;background: #e54d26;}#cun{width: 540px;height: 320px;border: 2px solid #d2d2d2;box-shadow: 1px 4px 8px #646464;}img{width: 500px;height: 280px;}
(3)JavaScript代码段:
function allowDrop(ev){//不执行默认处理(拒绝被拖放)ev.preventDefault();};function drag(ev){//使用setData(数据类型,携带的数据)//方法将要拖放的数据存入dataTransfer对象ev.dataTransfer.setData("Text",ev.target.id);};function drop(ev){//不执行默认处理(拒绝被拖放)ev.preventDefault();//使用getData()获取到数据,然后赋值给datavar data = ev.dataTransfer.getData("Text");//使用appendChild方法把拖动的节点放到元素节点中成为其子节点ev.target.appendChild(document.getElementById(data));};
4.实现的效果如下:
(1)未拖放之前:
(2)拖放之后:
阅读全文
0 0
- HTML5实现简单的拖放功能
- [HTML5&CSS3]拖放功能的实现
- Html5的拖放功能
- HTML5 拖放及排序的简单实现
- 拖放功能的实现
- 拖放功能的实现
- (5):Silverlight 2 实现简单的拖放功能
- 第05课 实现简单的拖放功能
- HTML5之拖放功能
- HTML5拖放功能
- HTML5之拖放属性实现图片的拖放
- HTML5实现网页元素的拖放操作
- html5+原生js实现拖放与拖拽功能
- HTML5实现拖放
- html5实现拖放
- html5实现目标拖放
- html5实现拖放图片
- Javascript实现HTML5拖放
- MYSQL学习笔记(二十)使用游标
- Xcode 一键导入代码块 一键调用 提高开发效率
- Java常用类
- bootstrap学习总结分享
- 用训练好的caffemodel来进行分类
- HTML5实现简单的拖放功能
- 算法题练习系列之(十九): 程序运行时间
- Round-Robin算法的迭代器实现
- BZOJ 2301 [HAOI2011]Problem b (莫比乌斯反演)
- wfrf
- 冒泡小例子
- 解决mysql connection ODBC安装系统代码126错误 VC2013安装
- MYSQL学习笔记(二十一)使用触发器
- MYSQL学习笔记(二十二)管理事务处理