HTML5--拖动01
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖动</title>
<style type="text/css">
/*--04--*/
#cun{
background-color: cornflowerblue;
width: 500px;
height: 200px;
}
#tuo{
background-color: blue;
width: 500px;
height: 200px;
}
</style>
<script type="text/javascript">
//--02--
function drag(e){
document.getElementById("st").innerHTML="开始拖动：drang(event)"+e.target.id;
//使用setData(数据类型,携带的数据)，将要多方的数据，存入dataTransfer对象中:键值对
e.dataTransfer.setData("Text", e.target.id);
}
//--05--
function allowDrop(e){
//不执行默认处理（默认：拒绝拖放）
e.preventDefault();
document.getElementById("allow").innerHTML="拖到了指定地点：drop(event):"+e.dataTransfer.getData("Text");
}
//--06--
function drop(e){
//不执行默认处理（默认：拒绝拖放）
e.preventDefault();
document.getElementById("ov").innerHTML="拖到了指定地点：drop(event):"+e.dataTransfer.getData("Text");
//使用getData()获取数据，然后赋值给data：键值对获取
var data= e.dataTransfer.getData("Text");
//使用appendChild()方法把拖动的节点元素，放到子元素中
e.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<!--03-->
<div id="cun" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
<!--01-->
<img id="tuo" src="imgs/img.jpg" draggable="true" ondragstart="drag(event)" width="500px" height="200px">
<br>开始：<span id="st"></span>
<br>允许：<span id="allow"></span>
<br>到达：<span id="ov"></span>
</body>
</html>
HTML5--拖动01的更多相关文章
- 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 学习01——浏览器问题、新元素
Internet Explorer 浏览器问题 问题:Internet Explorer 8 及更早 IE 版本的浏览器不支持HTML5的方式. <!--[if lt IE 9]> < ...
- [整理]html5 WebApp 01
在正式进入WebApp开发之前,有几个问题要解决: 1.我是产品策划:UI风格,功能设计,产品预期效果(如访问量等各类指标) 2.我是UI设计:图片图标制作,我该按怎样的大小来设计? 3.我是前端开发 ...
- HTML5拖动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- html5拖动监听
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: o ...
- HTML5 学习01
HTML的英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言. 所谓超文本,是因为它可以加入图片.声音.动画.影视等内容,事实上每 ...
随机推荐
- 【BZOJ1672】[Usaco2005 Dec]Cleaning Shifts 清理牛棚 动态规划
[BZOJ1672][Usaco2005 Dec]Cleaning Shifts Description Farmer John's cows, pampered since birth, have ...
- zeppelin-0.6.0安装配置
从http://zeppelin.apache.org/download.html 下载 zeppelin-0.6.0-bin-all.tgz 解压 修改zeppelin-site.xml,配置端口 ...
- [MySQL]使用Begin...End语句的一个坑
写一个触发器,执行单条语句是OK的. 想执行多条语句,尝试在代码中加入BEGIN END.但一加BEGIN END就报错, 错误信息也很诡异,只说某一行出错了,不符合Mysql的语句规范,提示信息就个 ...
- 解决 卸载Mysql后，服务还在的问题
HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application\MySQL文件夹:删除HKEY_LOCAL_MACHINE\ ...
- python 之 前端初识 html
html语法代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- ffmpeg 屏幕录制 so easy....
linux Linux下使用FFmpeg进行屏幕录制相对比较方便,可以使用x11grab,使用如下的命令: ffmpeg -f x11grab -s 1600x900 -r 50 -vcodec li ...
- Java 对象拷贝方式
(1)BeanUtils.cloneBean()使用: http://www.cnblogs.com/fervour/archive/2009/12/18/1627868.html package c ...
- 微信支付（20140923更新）商户支付密钥key的生成与设置
微信支付(0923更新)商户支付密钥key的生成与设置 说明:新版微信支付,用户必须授权登录才能支付.需要商家自己设置商户号支付密钥. 设置商户号支付密钥方法如下: 1. 申请通过审核后,打开微信发来 ...
- 【6集iCore3_ADP触摸屏驱动讲解视频】6-1 工程及程序构架介绍
视频简介: 该视频由银杏科技有限公司基于iCore3应用开发平台推出,包含 触摸屏驱动工程文件的介绍与程序构架的介绍等. 源视频包下载地址: http://pan.baidu.com/s/1dFz ...
- sql表别名
表名.列明后面接as xx,xx就是表/列的别名,as可省略 别名通常有两个作用 as可省略,as可省略