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,即超文本标记语言,是一种用来制作超文本文档的简单标记语言. 所谓超文本,是因为它可以加入图片.声音.动画.影视等内容,事实上每 ...
随机推荐
- 【BZOJ】3542: DZY Loves March
题意 \(m * m\)的网格,有\(n\)个点.\(t\)个询问:操作一:第\(x\)个点向四个方向移动了\(d\)个单位.操作二:询问同行同列其他点到这个点的曼哈顿距离和.强制在线.(\(n \l ...
- 【异常】ORA-01536: space quota exceeded for tablespace
### The error may exist in /src/main/resources/com/star/css/dao/sql/workflow.xml ### The error may i ...
- Make github as your personal maven repository
前言: 开始用maven管理java项目后,突然发现自己写了一些通用的项目想要被别的项目依赖是件很麻烦的事.公司里项目依赖可以直接有maven仓库,但个人项目呢? github 再次显示其威力了,ex ...
- Bigtable 论文 阅读笔记 - 原理部分
不支持markdown,桑心.更好的阅读体验请看:Github/Bigtable.md Paper: Google Bigtable paper Notes author: Lhfcws Wu Tim ...
- Odoo中本日、本月、上月过滤器实现方法
<filter string="今日订单" name="today" invisible="0" domain="[('da ...
- scrollview 嵌套 折叠效果
------------------------------- --@ CreateDate: 2015.08.05 --@ Author: 王成成 --@ FileName: BaoSh ...
- 諾基亞定制的Android系統名為 Z Launcher
N1這款產品似乎沒有諾基亞的傳統風格,搭載Android系統以及酷似iPad mini的外觀,都在向外界傳遞著一個信號:諾基亞在變化.不過,沒有了移動設備部門的諾基亞,仍然心系消費電子市場,N1會是個 ...
- 【转】windows和linux中搭建python集成开发环境IDE
本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...
- MongoDB的配置、启动、关闭
MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...
- ios中蓝牙自动连接出现硬件提示框的问题
出现如图所示情况,这时候有两种方法可以处理,一种是让硬件部修改硬件配对,另一种是程序里面测试该提示框的对应特征值,不要调用该特征值就不会出现 //2.扫描到Characteristics,特征回调 - ...