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,即超文本标记语言,是一种用来制作超文本文档的简单标记语言. 所谓超文本,是因为它可以加入图片.声音.动画.影视等内容,事实上每 ...
随机推荐
- Websocket简单例子
websocket是Html5的一个协议,也就是说距离我们2016年就几年时间,其他原理我就不说了,直接讲例子 一.准备材料:1.一个开发工具必须支持javaEE7的,原因是javaEE6或以下不支持 ...
- 设置 tableview 的背景颜色,总是有蒙层
1.给tableview添加了背景图片后, cell 总是有一层蒙层蒙着,很阴暗. 2.实验以后才发现背景图片被放在了 cell 的后面.
- ZeroMQ接口函数之 ：zmq_proxy – 开始ZMQ内置代理
ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq-proxy zmq_proxy(3) ØMQ Manual - ØMQ/4.1.0 Nam ...
- django错误-NoReverseMatch at /admin/
错误提示: NoReverseMatch at /admin/ Reverse for 'logout' with arguments '()' and keyword arguments '{}' ...
- Python之路第一课Day1--随堂笔记
课堂大纲: 一.Python介绍 二.发展史 三.Python 2 or 3? 四.安装 五.Hello World程序 六.变量 七.用户输入 八.模块初识 九..pyc是个什么鬼? 十.数据类型初 ...
- H TC並沒有成為下一個摩托羅拉或諾基亞。
關於2014年第四季度,H T C在三季度財報說明中提到,“年度旗艦H T CO ne(M 8)與中端機型H T C D esire系列在競爭日趨激烈的智能手機市場保持穩定的銷售,市占率有所提升,延續 ...
- linux常用命令(二)
文件处理命令接上一篇 cat concatenate and display fils 查看小文件 more分页显示文件 空格或者f翻页,回车下一行,Q或q退出. head –num num代表行数 ...
- Mysql5.7修改默认密码
由于 Mysql5.7的默认密码是随机生成的,所以需要修改成我们自己常用的密码 1.修改 my.ini,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 my ...
- 使用 PDO 方式将 Session 保存到 MySQL 数据中
类: <?php /* 使用数据库保存session */ class DBHandler implements SessionHandlerInterface { protected $dbh ...
- EXCEL技巧——SUBTOTAL函数巧妙应用
想用COUNTA来计算非空单元格的数量,但它会把隐藏的单元格也算进去,所以用到了SUBTOTAL这个函数.做个记录,方便日后使用 函数表示: SUBTOTAL(function_num, ref1, ...