<!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之拖放简单效果的更多相关文章

  1. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

  2. HTML5大数据可视化效果（二）可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  3. HTML5原生拖放实例分析

    HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...

  4. HTML5实现刮奖效果

    原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...

  5. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  6. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. HTML5 模拟现实物理效果，感受 Web 技术魅力

    Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

  8. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  9. 练习：javascript分享划过简单效果

    利用目标点判断速度speed正负值.利用目标点函数封装传参, <!doctype html> <html lang="en"> <head> & ...

随机推荐

  1. STM32使用串口1配合DMA接收不定长数据，减轻CPU载荷

    STM32使用串口1配合DMA接收不定长数据,减轻CPU载荷 http://www.openedv.com/thread-63849-1-1.html 实现思路:采 用STM32F103的串口1,并配 ...

  2. VS 2013上Python的配置

    最近有点不务正业,去看了下Python (主要是学校OJ有这个语言,然后可以轻松解决大数据问题,不要说我太坑~~~) 目前感觉python和matlab有些类似,缺少了变量类型声明,总感觉自己写出来的 ...

  3. BZOJ 3275: Number( 最小割 )

    S->每个奇数,每个偶数->T各连一条边, 容量为这个数字.然后不能同时选的两个数连容量为+oo的边. 总数-最大流即是答案. 因为满足a2+b2=c2的a,b一定是一奇一偶或者两个偶数, ...

  4. BZOJ 3384: [Usaco2004 Nov]Apple Catching 接苹果( dp )

    dp dp( x , k ) = max( dp( x - 1 , k - 1 ) + *** , dp( x - 1 , k ) + *** ) *** = 0 or 1 ,根据情况 (BZOJ 1 ...

  5. js_DOM属性

    .nodeType==1,指的是li, .nodeType==3,则指的文本节点. .children属性,和 .childNodes属性类似,但是只会包含元素节点,而不会包含文本节点. .child ...

  6. Javascript常用函数收集(不定期更新)

    str.replace('/正则表达式/','替换内容'); //正则替换str.match('/正则表达式/','替换内容'); //正则匹配 str.indexOf('查找代码'); //查找是否 ...

  7. CodeForces 294B Shaass and Bookshelf 【规律 & 模拟】或【Dp】

    这道题目的意思就是排两排书,下面这排只能竖着放,上面这排可以平着放,使得宽度最小 根据题意可以得出一个结论,放上这排书的Width 肯定会遵照从小到大的顺序放上去的 Because the total ...

  8. Codeforces 489C Given Length and Sum of Digits...

    m位长度,S为各位的和 利用贪心的思想逐位判断过去即可 详细的注释已经在代码里啦~ //#pragma comment(linker, "/STACK:16777216") //f ...

  9. 开大Stack的一个小技巧

    在程序头部添加一行 #pragma comment(linker, "/STACK:16777216") 可有效开大堆栈 实验效果如下: 11330179 2014-08-05 1 ...

  10. docker 学习笔记20：docker守护进程的配置与启动

    安装好docker后,需要启动docker守护进程.有多种启动方式. 一.服务的方式 因为docker守护进程被安装成服务.所以,可以通过服务的方式启停docker守护进程,包括查看状态. sudo ...