使用H5拖放事件来写一个小程序

最新推荐文章于 2023-07-13 12:14:12 发布

19年，重新开始写

最新推荐文章于 2023-07-13 12:14:12 发布

阅读量952

点赞数

分类专栏： html5+css3

本文链接：https://blog.csdn.net/qq_27905183/article/details/53037461

版权

本文介绍了如何使用HTML5的拖放事件来编写一个小程序。通过设置元素的draggable属性，结合ondragover事件和DataTransfer对象，实现拖放到不同区域执行不同的操作，如收藏和删除。

摘要由CSDN通过智能技术生成

1.所有的元素都有一个draggable属性，用于指定是否启动该元素的拖放功能，而/两个元素默认启动拖放

<div draggable="true">
    innerHTML
</div>

2.拖放操作相关的事件:

被拖动的元素的事件:
    1.ondragstart：开始拖动时触发
    2.ondrag：拖动过程中持续触发
    3.ondragend：拖动结束时触发
拖动时鼠标经过的元素的事件:
    1.ondragenter：刚开始进入该元素的范围时触发
    2.ondragover：经过该元素范围时持续触发
    3.onleave：离开该元素范围时触发
    4.ondrop：被拖动元素放到了该元素上时触发

小提示：如果想让拖动放下之后不使用浏览器默认行为，也就是打开一个新的页面，可以指定ondragover事件:return false ;

3.DataTransfer对象，拖放事件触发的拖放事件event有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下常用的属性和方法：

1.setDragImage(ele,x,y)：设置拖放操作的自定义图标，ele表示自定义图标，
x和y分别表示图标和鼠标在水平和竖直方向的距离
2.getData(format)：获取对象中指定format格式的数据
3.setData(format,date)：想对象中设置format格式的数据data
4.clearData([format])：清除对象中format格式的数据或者所有数据

下面来使用拖放事件来完成一个简单的程序，实现的功能为：拖到收藏栏则copy，拖到回收站则delete

<!Doctype HTML>
<html>
    <head>
        <title>H5拖放项目</title>
        <meta http-equiv="content-Type" content="text/html;charset=utf-8" />
        <style>
            #list{
                width:70

最低0.47元/天解锁文章

19年，重新开始写

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用H5拖放事件来写一个小程序

1.所有的元素都有一个draggable属性，用于指定是否启动该元素的拖放功能，而/两个元素默认启动拖放<div draggable="true"> innerHTML</div>2.拖放操作相关的事件:被拖动的元素的事件: 1.ondragstart：开始拖动时触发 2.ondrag：拖动过程中持续触发 3.ondragend：拖动结束时触发拖动时鼠标经过的元素
复制链接

扫一扫

专栏目录