html5之拖放简单效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Drag and Drop</title>
<link rel="stylesheet" href="">
<style type="text/css">
#div1,#div2 {
width:488px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
//默认可放置
function allowDrop(ev){
ev.preventDefault();
}
//设置拖动
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//设置放置
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<!--
/**
* drag(event) 被拖动的数据
* drop(evemt) 放置数据
* draggable = "true" 设置图片可拖动
* 设置允许放置 调用ondragover的事件event.preventDefault();
* event.dataTransfer.getData("Text") 从剪切板中获取指定格式的数据
* event.dataTransfer.setData(""Text",evemt.target.id)给指定的对象赋予数据(数据类型:text,值是可拖动的元素id(drag1))
*/
-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
html5之拖放简单效果的更多相关文章
- 【Demo】HTML5拖放--简单demo
用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后------- 实现代码: <!DOCTYPE html> ...
- HTML5大数据可视化效果(二)可交互地铁线路图
前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...
- HTML5原生拖放实例分析
HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...
- HTML5实现刮奖效果
原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
- CSS3+HTML5特效9 - 简单的时钟
原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- HTML5 模拟现实物理效果,感受 Web 技术魅力
Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...
- jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
- 练习:javascript分享划过简单效果
利用目标点判断速度speed正负值.利用目标点函数封装传参, <!doctype html> <html lang="en"> <head> & ...
随机推荐
- SB中使用Autolayout设置到父视图的间距为0
发现打上钩的话在plus以下的屏幕上控件的实际x会是-4但是在plus上是0, 所以要设置一致的到视图的左右都未0 必须把Constrain to margins钩去掉!
- linux下编码和vim编码问题解决
Linux下编码问题 在Linux环境下经常会出现文件乱码的问题,这实际上就是因为文件编码,以Ubuntu为例,默认的字符编码为UTF-8,并且没有默认安装gbk和gb2312,所以需要我们进行安装和 ...
- __get __set 实例
<?php class Person { //下面是人的成员属性,都是封装的私有成员 private $name; //人的名子 private $sex; //人的性别 private $ag ...
- MyEclipse8.5 中安装Spket插件
MyEclipse8.5 中安装Spket插件 安装: 1. Myeclipse8.5安装和以前低版本有些不同(没有software updates). 点击help->Myeclipse Co ...
- 关于jsonp(~~原理和理解)
JSON和JSONP 与XML相比,JSON是一个轻量级的数据交换格式.JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象. 例如一个ticker对 ...
- Jekyll学习:基本使用方法
Jekyll是一个简单的博客.静态网站生成工具.利用它可以快速的搭建一个网站.并且完全免费的在 GitHub 上发布网站 — 自定义域名. 一.环境搭建 apt-get install jekyll ...
- zk leader选举自动完成
server 1: [root@wx03 bin]# ./zkServer.sh status ZooKeeper JMX enabled by default Using config: /zook ...
- 15个最受欢迎的Python开源框架
以下是伯乐在线从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python Web应用开发框 ...
- Mybatis3 框架理解
最近工作比较闲,维护一个政府机关的短信发送平台,大部分业务逻辑都在Oracle数据库上,但自己明明应聘的是Java开发啊!!!整天写存储过程的我还是有一颗写高级语言的心啊!!!好吧!!!先找个数据库方 ...
- Android 多分辨率机适应
如果你有一台机器,如以下决议: 800 x 480 1024 x 600 1024 x 768 1280 x 800 1920 x 1200 2048 x 1536 总共六种类分辨率机器,假设依照dp ...