HTML 5 拖放
来源:互联网 发布:淘宝千人千面好用吗 编辑:程序博客网 时间:2024/05/16 02:15
<!-- 拖拽 --><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/><img id="drag1" src="mm1.jpg" draggable="true" ondragstart="drag(event)" alt="张含韵"><br/><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
/*----------------------拖拽----------------------*/// ondragover 事件规定在何处放置被拖动的数据。// 默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。function allowDrop(ev){ev.preventDefault();}// 拖动什么 function drag(ev){ev.dataTransfer.setData("Text",ev.target.id); //设置被拖数据的数据类型和值}// 当放置被拖数据时,会发生 drop 事件。function drop(ev){ev.preventDefault(); /*调用 preventDefault()来避免浏览器对数据的默认处理(drop事件的默认行为是以链接形式打开)*/var data=ev.dataTransfer.getData("Text"); /*通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。*/ev.target.appendChild(document.getElementById(data)); /*被拖数据是被拖元素的 id ("drag1")*/ /*把被拖元素追加到放置元素(目标元素)中*/}
第一步:拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
第二步:放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
第三步:进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}
代码解释:
- 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素(目标元素)中
0 0
- HTML 5 拖放[拖放图片]
- HTML 5 拖放
- html 5 拖放
- Lesson05:HTML 5 拖放
- HTML 5 拖放
- HTML 5 拖放
- HTML 5 拖放
- HTML 5 拖放
- HTML 5 拖放
- HTML 5 拖放
- HTML拖放
- 2.5.5改变拖放图标.html
- HTML拖放表格
- HTML 5 拖放 如果在网页上拖放控件,那么太好l !
- HTML 5 Step by Step(一) 拖放API
- Html 5:如何在两个 <div> 元素之间拖放图像
- HTML开发——拖放
- 记不住就存下来---- HTML 5 新增的拖放 API
- linux上SVN解决冲突的办法
- Wordpress使用"function_exists();"函数以提高主题兼容性
- UINavigationBar功能实现
- table checked row
- JSTL开发实例详解
- HTML 5 拖放
- 《牛人博客汇总》
- 视频录制压力,正反面录制视频
- CSRF(跨站请求伪造)详细说明
- SAPUI5-Button
- GRE写作必备句型
- 使用工具(JD-GUI和APKIDE)反编译JAR的方法
- PHP生成word的三种方式
- 数据库定期备份shell