HTML5拖动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1,#div2{width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;text-align: center;}
#div2{margin-top: 50px;}
div img{
height: 130px;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop1(event)" ondragover="allowDrop1(event)">
<!--为了让元素可拖动，设置 draggable='true'-->
<img src="http://img.hb.aicdn.com/e0ecf0d449916dd1c762899facf51f782769b1c310b7c-bDfMIu_fw658" draggable="true" ondragstart="drag(event)" id='dra'/>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
<script>
//ondragover-- 在拖动的时候阻止浏览器默认事件
function allowDrop(ev){
ev.preventDefault();
}
function allowDrop1(ev){
ev.preventDefault();
}
//ondragstart 拖动开始的时候触发该事件
function drag(e){
//dataTransfer.setData() 方法设置被拖数据的数据类型和值：
e.dataTransfer.setData("Text",e.target.id);
//数据类型是 "Text"，值是可拖动元素的 id ("dra")。
} // ondrop 拖动完成放置在该元素中的时候除非该事件
function drop(e){
var data= e.dataTransfer.getData('Text');//---接收数据
e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
e.preventDefault();
}
function drop1(e){
var data= e.dataTransfer.getData('Text');//---接收数据
e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
e.preventDefault();
}
</script>
</html>
HTML5拖动的更多相关文章
- 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拖动监听
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: o ...
- HTML5学习笔记
参考资料:http://www.runoob.com/html/html-tutorial.html 1.html5声明.将此html文档标记为html5文档 <!DOCTYPE html> ...
- html5 “拖放”
拖放主要是两个部分组成,drag:拖动,drop:放置!既抓取元素后拖到另一个位置! 要实现拖放首先要把被拖动元素设置为可拖动,既: draggbile="true" 然后要拖动什 ...
- HTML实现文件拖动上传
在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术: 1:记得导入:common-fileupload.jar包 ...
随机推荐
- Spring Boot（5） 集成Hibernate 日志配置
https://blog.csdn.net/ZNG_XP/article/details/78131809 https://blog.csdn.net/u011998835/article/detai ...
- Javascript Array 方法整理
Javascript Array 方法整理 Javascript 数组相关方法 说明 大多数其它编程语言不允许改变数组大小,越界访问索引会报错,但是 javascript不会报错,不过不建议直接修改a ...
- 【转】每天一个linux命令（43）：killall命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/21/2827366.html Linux系统中的killall命令用于杀死指定名字的进程(kill ...
- php常量PHP_EOL
换行符 unix系列用 \n windows系列用 \r\n mac用 \r PHP中可以用PHP_EOL来替代,以提高代码的源代码级可移植性 如: <?php echo PHP_EOL; // ...
- lamba数据架构以及数据湖
面试大数据项目,面试过程中发现面试官提到的两个概念没有搞清楚: 1. lamba数据架构:这个概念的提出是由storm的作者提出来的,其实主旨就是想要说明,数据的处理分成三层,一类是批处理程序(bat ...
- Angular 4.0 使用第三方类库
使用第三方类库分为以下几步 1. 将第三方类库安装到本地 1) Jquery的命令 npm install jquery --save 2) 安装bootstrap 安装成功后,将文件下载到node_ ...
- golang channel 的使用
本文对channel使用中的几个疑惑,以例子的形式加以说明. 普通channel 缺省情况下,发送和接收会一直阻塞着,直到另一方准备好. 例如: package main import ( " ...
- C#.net 微信公众账号接口开发
微信越来越火,微信公众平台成为开发成新宠,本文用C#.net开发微信公众信号接口. 微信接口地址代码: weixin _wx = new weixin(); string postStr = &quo ...
- 安装Linux软件时没有图形界面的问题
Q: 现在Linux下的软件有很多也采用图形界面安装了:但有时候我们发现启动安装程序时本该出现图形界面时却出现了文本界面. A: 检查常用的图形函数库(最主要的自然是gtk, qt)是否已安装.尤其是 ...
- 【Hibernate异常处理-1】java.lang.NoSuchMethodError: javax.persistence.JoinColumn.foreignKey()Ljavax/persistence/ForeignKey;
原文链接(经验证正确) 说明:其他几个涉及到:NoSuchMethodError: javax.persistence.xxx的处理方法和这相同. JAVAEE6.0中的 javax.persist ...