博客
关于我
HTML5实现原生拖放的案例
阅读量:111 次
发布时间:2019-02-26

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

之前做项目过程中遇到了一个拖放的效果实现,业务场景是为课程表手动拖拽添加课程。翻看了一下H5新增元素里面,有实现拖放的效果,于是就写了一个demo,效果如下图:

在这里插入图片描述
HTML代码:

HTML
CSS
JS
课程表:

首先,为了使元素可拖动,把 draggable 属性设置为 true :

然后,规定当元素被拖动时触发的事件,在上面的HTML代码中,ondragstart 属性调用了一个函数,start(event),该事件方法是在拖拽元素时触发。

ondragover 事件是在要放置的区域元素上定义,当鼠标拖拽着元素在该区域上方时触发。
ondrop 事件是把元素拖拽到指定区域并松开鼠标时触发。

CSS代码:

.list {   	display: flex;}.item {   	width: 100px;	height: 40px;	margin: 10px;	color: #fff;	text-align: center;	line-height: 40px;	border-radius: 10px;}.blue {   	background-color: royalblue;}.pink {   	background-color: deeppink;}.green {   	background-color: forestgreen;}#web {   	width: 150px;	height: 220px;	border: 1px solid #000;	position: absolute;	top: 150px;	left: 100px;	box-sizing: border-box;	padding: 10px;}

CSS没什么可说的,自己看吧。

JavaScript代码:

//开始拖拽元素function start(ev) {   	id = ev.target.id; //获取拖拽元素的ID}//要放置的区域function toOver(ev) {   	ev.preventDefault(); //阻止默认事件}//放置元素的方法function drop(ev) {   	var app = document.getElementById(id); // 获取拖动的元素对象	var div = document.getElementById(ev.target.id); // 放置区域的元素对象	div.appendChild(app); // 把拖拽对象追加到放置区域中}

上面的JS代码要配合着HTML标签上的事件函数查看,其实,整个过程很简单:

  1. 当鼠标拖动元素时,触发 ondragstart() 事件,获取要拖动元素的ID;
  2. 当鼠标拖拽着元素放置到指定区域时,触发 ondropover() 事件,在这里要阻止默认事件的触发;
  3. 当鼠标拖拽元素到指定区域,并松开鼠标时,触发 ondrop() 事件,获取拖拽元素的对象,追加到放置区域的节点内部;

转载地址:http://ykuk.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(4)——MySql基础知识、存储引擎与常用数据类型
查看>>
Mysql学习总结(50)——Oracle,mysql和SQL Server的区别
查看>>
Mysql学习总结(51)——Linux主机Mysql数据库自动备份
查看>>
Mysql学习总结(52)——最全面的MySQL 索引详解
查看>>
Mysql学习总结(53)——使用MySql开发的Java开发者规范
查看>>
Mysql学习总结(54)——MySQL 集群常用的几种高可用架构方案
查看>>
Mysql学习总结(55)——MySQL 语句大全再温习
查看>>
Mysql学习总结(56)——MySQL用户管理和权限设置
查看>>
Mysql学习总结(57)——MySQL查询当天、本周、本月、上周、本周、上月、距离当前现在6个月数据
查看>>
Mysql学习总结(58)——深入理解Mysql的四种隔离级别
查看>>
Mysql学习总结(59)——数据库分库分表策略总结
查看>>
Mysql学习总结(5)——MySql常用函数大全讲解
查看>>
Mysql学习总结(60)——并发量大、数据量大的互联网业务数据库设计规范总结
查看>>
Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
查看>>
Mysql学习总结(62)——MySQL连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link问题
查看>>
Mysql学习总结(63)——Mysql数据库架构方案选择与分析
查看>>
Mysql学习总结(64)——Mysql配置文件my.cnf各项参数解读
查看>>
Mysql学习总结(65)——项目实战中常用SQL实践总结
查看>>
Mysql学习总结(66)——设置MYSQL数据库编码为UTF-8
查看>>
Mysql学习总结(67)——MYSQL慢查询日志
查看>>