HTML5拖动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1,#div2{width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;text-align: center;}
#div2{margin-top: 50px;}
div img{
height: 130px;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop1(event)" ondragover="allowDrop1(event)">
<!--为了让元素可拖动，设置 draggable='true'-->
<img src="http://img.hb.aicdn.com/e0ecf0d449916dd1c762899facf51f782769b1c310b7c-bDfMIu_fw658" draggable="true" ondragstart="drag(event)" id='dra'/>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
<script>
//ondragover-- 在拖动的时候阻止浏览器默认事件
function allowDrop(ev){
ev.preventDefault();
}
function allowDrop1(ev){
ev.preventDefault();
}
//ondragstart 拖动开始的时候触发该事件
function drag(e){
//dataTransfer.setData() 方法设置被拖数据的数据类型和值：
e.dataTransfer.setData("Text",e.target.id);
//数据类型是 "Text"，值是可拖动元素的 id ("dra")。
} // ondrop 拖动完成放置在该元素中的时候除非该事件
function drop(e){
var data= e.dataTransfer.getData('Text');//---接收数据
e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
e.preventDefault();
}
function drop1(e){
var data= e.dataTransfer.getData('Text');//---接收数据
e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
e.preventDefault();
}
</script>
</html>
HTML5拖动的更多相关文章
- HTML5 拖动
触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- html5拖动文件上传
使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...
- html5拖动滑块
html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"& ...
- HTML5拖动画布/拖放
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...
- html5拖动监听
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: o ...
- HTML5学习笔记
参考资料:http://www.runoob.com/html/html-tutorial.html 1.html5声明.将此html文档标记为html5文档 <!DOCTYPE html> ...
- html5 “拖放”
拖放主要是两个部分组成,drag:拖动,drop:放置!既抓取元素后拖到另一个位置! 要实现拖放首先要把被拖动元素设置为可拖动,既: draggbile="true" 然后要拖动什 ...
- HTML实现文件拖动上传
在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术: 1:记得导入:common-fileupload.jar包 ...
随机推荐
- 【spring data jpa】好文储备
[spring data jpa]带有条件的查询后分页和不带条件查询后分页实现 : https://blog.csdn.net/lihuapiao/article/details/48782843 ...
- 《Java程序猿面试笔试宝典》之Java变量命名有哪些规则
在Java语言中,变量名.函数名.数组名统称为标识符,Java语言规定标识符仅仅能由字母(a~z.A~Z).数字(0~9).下划线(_)和$组成,而且标识符的第一个字符必须是字母.下划线或$.此外.标 ...
- RAC1——Clusterware概念简介1
一 集群环境下的一些特殊问题 1.1 并发控制 在集群环境中, 关键数据通常是共享存放的,比如放在共享磁盘上. 而各个节点的对数据有相同的访问权限, 这时就必须有某种机制能够控制节点对数据的访问. O ...
- vue 文件中的注释
在每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML.CSS.JavaScript.Jade 等).在文件最顶部注释的时候用HTML的注释语法:<!- 在这里写注释的内容 -- ...
- centos 修改时区及NTP时间同步
在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...
- maven工程下的“run as application”
为了让maven能够在Terminal窗口执行(比在Console执行方便多了,命令行总是比右键选择run要快),需要配置如下的profile:然后敲入 mvn -test -Prun 即可. ...
- WCF揭秘学习笔记（5）：WF定制活动
WF(Windows Workflow Foundation,Windows工作流基础)为.NET提供了一种基于模型的.声明方式的过程执行引擎,它改变了传统的通过一行行编写代码来开发服务功能的方式. ...
- Centos替换默认源
将默认的国外源替换为国内的网易的源 参考帮助文档:http://mirrors.163.com/.help/centos.html 查看本机版本:cat /etc/redhat-release 先安装 ...
- PHP中header的用法总结
来源 :http://blog.sina.com.cn/s/blog_7298f36f01011dxv.html header的用法 header()函数的作用是:发送一个原始 HTTP 标头[Htt ...
- SpringCloud中接收application/json格式的post请求参数并转化为实体类
@CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={RequestMethod ...