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,即超文本标记语言,是一种用来制作超文本文档的简单标记语言. 所谓超文本,是因为它可以加入图片.声音.动画.影视等内容,事实上每 ...
随机推荐
- RunLoop和autorelease的一道面试题
有这么一道iOS面试题 以下代码有没有什么问题?如果有?如何解决? for (int i = 0; i < largeNumber; i++) { NSString *str = [NSStri ...
- UVA 10791 Minimum Sum LCM（分解质因数）
最大公倍数的最小和 题意: 给一个数字n,范围在[1,2^23-1],这个n是一系列数字的最小公倍数,这一系列数字的个数至少为2 那么找出一个序列,使他们的和最小. 分析: 一系列数字a1,a2,a3 ...
- SharedPreferences介绍,用来做数据存储
sharedPreferences是通过xml文件来做数据存储的. 一般用来存放一些标记性的数据,一些设置信息. *********使用sharedPreferences存储数据 public sta ...
- 使用MS Test进行单元测试
MS Test也可以方便的进行单元测试,可以通过Visual Studio很方便的建立单元测试. 添加对待测试工程的引用,即可方便的开始单元测试. 最基本的一些测试使用如下: using System ...
- 安卓初級教程（2）：SD創建file，儲存與讀寫的方法(1)
package com.sdmadik; import java.io.*; import android.app.Activity; import android.os.Bundle; import ...
- C#转摘
尽量用Func和lambda解决函数变量问题,用var, dynamic来解决动态变量问题
- 百度网盘生成二维码api
分享出自精神,灵感来自大脑,在百度云网盘分享每一个文件,都会在页面生成一个二维码扫描的图片: 我就进一步看了该图片的地址: 发现没有,圈圈内是不是有点眼熟,就跟其他二维码api接口一样,只要盗用这段东 ...
- Ant和Maven的作用是什么？两者之间功能、特点有哪些区别？
Ant和Maven都是基于Java的构建(build)工具.理论上来说,有些类似于(Unix)C中的make ,但没有make的缺陷. Ant是软件构建工具,Maven的定位是软件项目管理和理解工具. ...
- [转载]ERP实施40问 60分钟外行变专家
http://www.chinaodoo.net/thread-389-1-1.html 在多年的实践中,结合自身经验和多年的理论积累,总结出有关ERP实施的最关键的40个问题,以问答的形式,让您在最 ...
- EditText添加了ImageSpan后，在两者中间不能输入纯文本
严格来说是连续插入两个ImageSpan之后,在其中间不能够输入纯文本内容. 最后发现问题出现在了SpannableString在设置ImageSpan的时候第四个参数flag的问题. spannab ...