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> & ...
随机推荐
- 免费edu邮箱申请注冊地址
几个国外.edu邮箱注冊地址: 注冊地址:http://mail.alumni.fandm.edu/reg/reg_pangia.asp @alumni.fandm.edu 注冊地址: http: ...
- 【转】linux挂载新硬盘，开机自动挂载
[转]linux挂载新硬盘,开机自动挂载 ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ Linux的硬盘识别: 2.6 kernel以后,linux会将 ...
- C - Virtual Friends
网上搜了,好多c++里的东西啊 有思路不会做,真烦,还是好好学c++: 先把题和代码粘过来,过几天学c++好了再看 http://acm.hust.edu.cn/vjudge/contest/view ...
- Android模拟器启动异常
设置系统环境变量的 ANDROID_SDK_HOME为任意一个目录,我的目录:C:\android_avd, 关闭eclipse,然后重新启动eclipse, 删除之前创建的AVD, 然后重新创建,即 ...
- 基于visual Studio2013解决算法导论之012计数排序
题目 计数排序 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> #in ...
- 基于visual Studio2013解决C语言竞赛题之0413同构数
题目 解决代码及点评 该题目与水仙花数类似,只是条件不同,循环还是一样的 /***************************************************** ...
- 上证A股股指跌破1900
上证A股股指跌破1900 有钱的同学赶紧买哦,机会难得哈哈!
- 达内TTS6.0课件basic_day04
- 以前学习cisco ccna 课程的时候做的笔记
由于学习的专业是计算机网络技术,可是在上学的时候,并没有学习到多少网络知识,所以为了对得起学的专业,在06年工作的时候,在哈工大银河教育报了个ccna的班,两个星期的课程,每天上那么几个小时. 结果依 ...
- 第一个hibernate文件 xml配置方法
package com.entity; public class User { private String username; private String password; private In ...