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,即超文本标记语言,是一种用来制作超文本文档的简单标记语言. 所谓超文本,是因为它可以加入图片.声音.动画.影视等内容,事实上每 ...
随机推荐
- 【Cocos2d-x游戏开发】Cocos2d-x中的弱联网技术
在上一篇博客中,我们一起学习了如何在Cocos2d-x中存储数据和读取信息,本篇博客我们将一起讨论和数据存储同样重要的联网技术. 一.弱联网技术介绍 在网络游戏中许多重要的功能都需要网络连接,而根据需 ...
- 操作jQuery
==================================== $('img').each(function(){ this.alt='This is image['+n+'] with a ...
- BZOJ1068: [SCOI2007]压缩
... 1068: [SCOI2007]压缩 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 909 Solved: 566[Submit][Statu ...
- iOS开发中常见问题集锦
在iOS开发中,会出现各种各样的问题.今天,就把这些常见的问题以及各位大牛的解决方案汇总下,方便以后查阅: 常见错误: 1. linker command failed with exit code ...
- [canvas]用canvas绘制饼状图
折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Windows 7您的凭据不工作
假设计算机A要远程连接到计算机B 一.参考链接 http://jingyan.baidu.com/article/148a1921a807d34d70c3b143.html 在计算机B上操作 快捷键 ...
- jQuery全屏滚动插件fullPage.js
github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...
- 《Linux内核设计与实现》读书笔记 第一、二章
第一章 Linux内核简介 1.1Unix历史 Unix特点:1.很简洁 2.所有东西都被当成文件对待 3.Unix内核和相关的系统工具软件都是用C语言编写而成 4.进程创建非常迅速 所以Uni ...
- Glide加载图片到自定义的圆形ImageView中不显示
当使用自定义的圆形ImageView时,发现使用Glide加载并设置默认初始图片时,自定义的ImageView一直显示默认图片,无法更新到加载的图片. 使用下面代码可以解决这个问题 Glide.wit ...
- mysql导入大文件sql
备份mysqldump mysqldump -u root -p ao2012 > /mnt/www/zq_ao2012/backup.sql 然后数据库密码 导入 mysql -h local ...