<!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. C# 方法的调用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. iOS: 在键盘之上显示一个 View

    如 AlertView,当 show 一个 Alert 时,它会覆盖在 Keyboard 上面,不影响显示的效果.那么我们自己创建的 View 如何像 Alert 那样不被键盘盖住呢?很简单,拿到 A ...

  3. CMake使用之一

    概述 CMake是一个比make更高级的编译配置工具,它可以根据不同平台.不同的编译器,生成相应的Makefile或者vcproj项目. 通过编写CMakeLists.txt,可以控制生成的Makef ...

  4. winform判断输入是否是数字

    private bool IsNum(string str) { try { foreach (char c in str) { if (char.IsDigit(c)) return true; r ...

  5. C++自增和自减运算符(--和++)

    在C和C++中,常在表达式中使用自增(++)和自减(--)运算符,他们的作用是使变量的值增1或减1,如:++i(在使用i之前,先使i的值加1,如果i的原值为3,则执行j=++i后,j的值为4)--i ...

  6. Ibatis的分页机制的缺陷

    我们知道,Ibatis为我们提供了可以直接实现分页的方法 queryForList(String statementName, Object parameterObject, int skipResu ...

  7. [转]-bash: wget: command not found的两种解决方法

    wget 时提示 -bash:wget command not found,很明显没有安装wget软件包.一般linux最小化安装时,wget不会默认被安装,这里是CentOS 6.5 64位系统 解 ...

  8. Eclipse 和 MyEclipse控制台console不停的自动跳动，跳出来解决方案

    有时候Eclipse启动,控制台console不会自动跳出来,需要手工点击该选项卡才行,按下面的设置,可以让它自动跳出来(或不跳出来):由二种方法: 一.windows  ->   prefer ...

  9. ie6下常见的bug 调整页面兼容性

    ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...

  10. 【C++】第二章：Hello World！

    1.开发工具:Microsoft Visual C++ v6.0 2.通过IDE建立Hello World程序: 我们可以看到三个文件夹结构,分别是: Source Files(源文件). Heade ...