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包 ...
随机推荐
- python pandas Timestamp 转为 datetime 类型
In [11]: ts = pd.Timestamp('2014-01-23 00:00:00', tz=None) In [12]: ts.to_pydatetime() Out[12]: date ...
- Mysql_connect报告”No such file or directory”错误的解决方法
写了个php脚本单独执行mysql_connect(),发现错误信息居然是“No such file or directory"! 首先确定是mysql_connect()和mysql_pc ...
- Hadoop之HDFS
摘要:HDFS是Hadoop的核心模块之一,围绕HDFS是什么.HDFS的设计思想和HDFS的体系结构三方面来介绍. 关键词:Hadoop HDFS 分布式存储系统 HDFS是Hadoop的核心 ...
- solrcloud配置中文分词器ik
无论是solr还是luncene,都对中文分词不太好,所以我们一般索引中文的话需要使用ik中文分词器. 三台机器(192.168.1.236,192.168.1.237,192.168.1.238)已 ...
- xsl -fo 了解
XSL-FO是用于格式化XML数据的语言,全称为Extensible Stylesheet Language Formatting Objects(格式化对象的可扩展样式表语言),是W3C参考标准,现 ...
- mysql学习--mysql必知必会
上图为数据库操作分类: 下面的操作參考(mysql必知必会) 创建数据库 运行脚本建表: mysql> create database mytest; Query OK, 1 row ...
- flash TweenMax用法
二,TweenMax主类: 这里分几个大块来介绍,分别是:第三个参数特有属性(29个),PlugIn(17个),公共属性(10个),公共方法(20个). 1,第三个参数特有属性(29个): 这29个参 ...
- hadoop之 map个数控制
hadooop提供了一个设置map个数的参数mapred.map.tasks,我们可以通过这个参数来控制map的个数.但是通过这种方式设置map的个数,并不是每次都有效的.原因是mapred.map. ...
- netty 知识点
Netty:异步.事件驱动的NIO(非阻塞Non-blocking IO)框架 netty 教程:http://wiki.jikexueyuan.com/project/netty-4-user-gu ...
- drbd脑裂问题处理
http://blog.csdn.net/heianemo/article/details/8439813 split brain实际上是指在某种情况下,造成drbd的两个节点断开了连接,都以prim ...