<!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. 【DWR】Annotation入门

    DWR简介:http://baike.baidu.com/view/73492.htm?fr=aladdin DWR2.0以后新增加了JDK5的注解(Annotation)功能,使用注解功能之后可以从 ...

  2. access数据库

    //访问动态创建access数据库 string conn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.M ...

  3. Java, C#, Swift语法对比速查表

    原文:Java, C#, Swift语法对比速查表   Java 8 C# 6 Swift 变量 类型 变量名; 类型 变量名; var 变量名 : 类型; 变量(类型推断) N/A var 变量名= ...

  4. SilkTest天龙八部系列7-动态对象识别

    在测试web应用时,我们常常需要面对web页面对象变化频繁,并且使用预定义方式识别对象慢的困难.为了解决这些问题,SilkTest引入了dynamic object recognition技术,它使用 ...

  5. Android编程心得-设计一个可重用的自定义Dialog

            我们在实际开发过程中,会遇到一个问题,我们的Dialog如果使用一般的方法进行设置调用出来,会有很多的重复代码,如何将Dialog按照自己的思路设计呢,并让其可重用呢,下面我来介绍一下 ...

  6. Domain(AD) 管理

    新建账户 文件夹权限管理

  7. 读书笔记:php_tizag_tutorial

    昨天在实验室花了一天时间看了英文版的php_tizag_tutorial,因为上学期用php和bootstrap写过一个租房网站,对php还是比较熟悉.现在总结一下php_tizag_tutorial ...

  8. listview滑动

    单击其中的一个item时,让这个item能滚动的listview的顶部.现在用 list.scrollTo(0, item.getTop()); 实现啦 android listview滚动到顶部 转 ...

  9. cocos2d-x游戏开发系列教程-中国象棋01-工程文件概述

    上一篇博文我们看到了象棋的效果图,这一张我们来看象棋代码的整体概述 让我们先对整个代码框架有个了解. 主目录: 主目录包含内容如上图: classes目录:业务代码 proj.win32:包括main ...

  10. 基于visual Studio2013解决C语言竞赛题之0802图书信息查询

     题目 解决代码及点评 /* 功能:有一批图书,每本书有:书名(name),作者(author) , 编号(num),出版日期(date)四个数据, 希望输入后按书名的字母顺序将各书的记录排列好, ...