博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 drag & drop 拖拽与拖放
阅读量:7071 次
发布时间:2019-06-28

本文共 739 字,大约阅读时间需要 2 分钟。

关键词:

1. draggable:规定元素是否可拖动的,draggable=true可拖动

2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer

3. ondragstart:拖拽元素被拖拽时触发的事件,作用于被拖拽元素

4. ondragenter:拖拽元素进入目标元素时触发的事件,作用于目标元素

5. ondragover:拖拽元素在目标元素移动触发的事件,作用于目标元素

6. ondrop:拖拽的元素在目标元素上同时鼠标放开触发的事件,作用于目标元素上

7. ondragend:拖拽完成后触发的事件,作用于被拖拽元素上

 

实例:

    
拖拽

这是一段可移动的段落,请把该段落拖入上面的矩形进行测试

rectangle.ondragover = (e) => {        e.preventDefault();    };    rectangle.ondrop = (e) => {        let data=e.dataTransfer.getData("Text");        e.target.appendChild(document.getElementById(data));        e.preventDefault();    };    word.ondragend = (e) => {        document.getElementById('word').style.color = '#3cf078';    };

 

转载于:https://www.cnblogs.com/tracy-ling/p/10155595.html

你可能感兴趣的文章
springmvc-json小案例
查看>>
运行JAR文件(java -jar)
查看>>
解析Cloudera Manager内部结构、功能包括配置文件、目录位置等
查看>>
一致性哈希算法的java实现
查看>>
增强 Bash 的功能
查看>>
C/C++语言中字符串多行书写方法
查看>>
我的友情链接
查看>>
吴刚:手游的成功发展之路应该怎样走?
查看>>
CentOS用户和组管理
查看>>
Python 排序--简单选择排序
查看>>
我的友情链接
查看>>
openstack概述
查看>>
How To Detect Which Element Was Clicked, Using jQuery
查看>>
javascript & jQuery
查看>>
DW快速去除tppabs冗余代码
查看>>
Java8新特性之:新的日期和时间API
查看>>
如何才能从程序员成长为实战型架构师?必掌握这7大实战技能经验
查看>>
rabbitMQ集群的搭建和维护第二篇---利用python程序完成mq的消息收发和实时监控
查看>>
网众设置开机重启服务的命令,才可连接BOOT服务器
查看>>
数字签名基本原理
查看>>