<!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. Android:mimeType

    接收从其他应用传过来的数据,要用到清单文件 <activity android:name="com.terry.myActivity2" android:label=&quo ...

  2. 从零搭建LNMP环境

    Linux就是环境所在的操作系统: Nginx则是一个「高性能的HTTP和反向代理服务器」,官网地址:http://nginx.org/: MySQL则是一个方便地对数据进行增删改查的数据库管理系统, ...

  3. Ruby学习-第一章

    第一章 字符串,数字,类和对象 为了证明Ruby真的好用,hello world也能写的如此简洁: puts 'hello world' 1.输入/输出 print('Enter your name' ...

  4. C++标准库类型vector及迭代器iterator简介

    Vector是C++标准库类型,称为容器,一个容器中的所有对象必须是同一种类型的.与数组相比,其最大的优点就是动态增长.Vector是一个类模板,并不是数据类型,而vector<int>和 ...

  5. coreldraw圆形裁剪

    裁剪方法: http://zhidao.baidu.com/link?url=9-OuTkkr7igOHgKDOhJgU6iUYY5MeGEGdNXX8p6RGq79Im4va0UdMAmH4gSDz ...

  6. 开源 免费 java CMS - FreeCMS1.9 职位管理

    项目地址:http://code.google.com/p/freecms/ 职位管理 管理职位,实现招聘功能. 1. 职位管理 从左側管理菜单点击职位管理进入. 2. 加入职位 在职位列表下方点击& ...

  7. Shell基础一

    Shell指令: shell识别三种基本命令:内建命令.Shell函数以及外部命令: 内建命令就是由shell本身所执行的命令.有些命令是由于其必要性才内建的:例如:cd.read: 另一种内建命令的 ...

  8. jquery分页

    //分页插件 /** 2015-12-7 **/ (function($){ var ms = { init:function(obj,args){ return (function(){ ms.fi ...

  9. MSSQL奇技淫巧

    MSSQL:获得库每个表的记录数和容量 sp_msforeachtable是MS未公开的存储过程: exec sp_msforeachtable @command1="print '?'&q ...

  10. Arduino 入门程序示例之一排 LED(2015-06-11)

    概述 最简单的一个 LED 的实验之后,自然是增加几个 LED,咱排成一排来玩吧.最后,再把一排的 LED 排成一个 8 字来玩——七段数码管. 示例程序 流水灯 第一个出场的肯定是经典的流水灯,也叫 ...