<!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. iOS 之使用CAShapeLayer中的CAGradientLayer实现圆环的颜色渐变

    本文转载自:http://blog.csdn.net/zhoutao198712/article/details/20864143 在 Github上看到一些进度条的功能,都是通过Core Graph ...

  2. stm32之RCC

    stm32时钟系统的意义: 1.电源的开关作用,达到低功耗效果: 2.调节时钟的速度: 对于每个外设,都要设置设置,stm32的时钟系统为了更低功耗: STM32时钟系统框图分析: 时钟源: 时钟是S ...

  3. 【Nginx】启动报错-端口被占用

    将下载的windows版nginx的压缩包nginx-1.4.2.zip解压到F:\server\nginx-1.4.2里面. dos命令键入: F: cd F:\server\nginx-1.4.2 ...

  4. C++,对象成员的访问

    成员变量和成员函数的访问可以采用以下几种访问方式:对象.成员变量名: 对象.成员函数名(实参列表)对象的指针->成员变量名; 对象的指针->成员函数名(实参列表)对象的引用.成员变量名对象 ...

  5. ulipad双击无反应

    所有的东西都配好后,执行ulipad需要注意的是: 1,必须以管理员身份运行ulipad. 2,当运行有道词典的时候,双击ulipad是没有反应, 至于为什么会出现这种情况,我也不太清除,等我查到 原 ...

  6. eclipse the user operation is waiting for building workspace" to complete

    "the user operation is waiting for building workspace" to complete", 解决办法: 1.选择菜单栏的“P ...

  7. 我的Python成长之路---第四天---Python基础（15）---2016年1月23日（寒风刺骨）

    二.装饰器     所谓装饰器decorator仅仅是一种语法糖, 可作用的对象可以是函数也可以是类, 装饰器本身是一个函数, 其主要工作方式就是将被装饰的类或者函数当作参数传递给装饰器函数.本质上, ...

  8. C#实现时间戳转化

    /// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <param name=”timeStamp”></para ...

  9. 以路由控制URL

    至此为止,我们一直在使用ASP.NET MVC新项目随带的默认路由配置.现在我们将深入探讨路由系统,并学习如何创建应用程序的自定义路由,以确保URL既是用户友好又是搜索引擎可访问的. 路由的全部内容都 ...

  10. vc++窗口的创建过程（MFC消息机制的经典文章）

    一.什么是窗口类  在Windows中运行的程序,大多数都有一个或几个可以看得见的窗口,而在这些窗口被创建起来之前,操作系统怎么知道该怎样创建该窗口,以及用户操作该窗口的各种消息交给谁处理呢?所以VC ...