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包 ...
随机推荐
- listening for variable changes in javascript
https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript
- python 获取excel文件的所有sheet名字
当一个excel文件的sheet比较多时候, 这时候需要获取所有的sheet的名字. xl = pd.ExcelFile('foo.xls') xl.sheet_names # see all she ...
- TensorFlow笔记-07-神经网络优化-学习率,滑动平均
TensorFlow笔记-07-神经网络优化-学习率,滑动平均 学习率 学习率 learning_rate: 表示了每次参数更新的幅度大小.学习率过大,会导致待优化的参数在最小值附近波动,不收敛:学习 ...
- MQ的不足
调用方实时依赖执行结果的业务场景,请使用调用,而不是MQ.MQ是互联网分层架构中的解耦利器,那所有通讯都使用MQ岂不是很好?这是一个严重的误区,调用与被调用的关系,是无法被MQ取代的.比如用户登录场景 ...
- 基于TLS（线程局部存储）的高效timelog实现
什么是timelog? 我们在分析程序性能的时候,会加入的一些logging信息记录每一部分的时间信息 timelog模块的功能就是提供统一的接口来允许添加和保存logging 我们正在用的timel ...
- 特殊字符搜索网站 http://symbolhound.com/
最近在学习makefile,想搜索一下 $@是啥意思,结果google由于忽略了特殊字符,结果啥也没找到, 后来在stackoverflow上看到了别人同样的问题 http://stackoverfl ...
- python之 序列与字典遍历
在Python中有六种内建的序列:列表.元组.字符串.Unicode字符串.buffer对象和xrange对象.在这里暂时只讨论字符串.列表和元组的遍历. 一. 序列遍历 序列有两种遍历:一种通过值 ...
- vue-cli、webpack提取第三方库-----DllPlugin、DllReferencePlugin
需要安装的插件有 extract-text-webpack-plugin assets-webpack-plugin clean-webpack-plugin npm install extract- ...
- c# 模拟POST上传文件到服务器
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...
- idea远程调试jar包
1 服务器启动jar包 (监听端口5005) java -Xdebug -Xrunjdwp:transport=dt_socket,address=5005,server=y,suspend=y -j ...