如图

可以从第一个方框拖拽花色到第二个方框中。

也可以再拖动回来。

具体代码实现

index.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset=utf-8>

<title>HTML5 Drag && Drop Demo</title>

<link rel="stylesheet" href="css/main.css"></link>

<script>

function DragHandler(target, e) {

        e.dataTransfer.setData('Text', target.id);

    }

    function DropHandler(target, e) {

       var id = e.dataTransfer.getData('Text');

       target.appendChild(document.getElementById(id));

       e.preventDefault();

    }

</script>

</head>

<body>

<header>

<h1>HTML5 Drag & Drop Demo</h1>

</header>

<div id="dndcontainer">

<div ondrop="DropHandler(this,event)" ondragenter="return false" ondragover="return false" class="dndbox">

<img src="data:images/item-1.png" id="club" ondragstart="DragHandler(this,event)" width="75" height="75" border="0" alt=""/>

<img src="data:images/item-2.png" id="heart" ondragstart="DragHandler(this,event)" width="75" height="75" border="0" alt=""/>

<img src="data:images/item-3.png" id="spade" ondragstart="DragHandler(this,event)" width="75" height="75" border="0" alt=""/>

<img src="data:images/item-4.png" id="diamond" ondragstart="DragHandler(this,event)" width="75" height="75" border="0" alt=""/>

</div>

<div ondrop="DropHandler(this,event)" ondragenter="return false" ondragover="return false" class="dndbox"></div>

</div>

</body>

</html>

main.css

.dndbox

{

	width:300px;

	height:300px;

	border:1px solid #000;

}

HTML5 实现拖拽的更多相关文章

  1. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  2. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  3. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  4. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  5. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  6. HTML5文件拖拽

    HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...

  7. html5实现拖拽文件上传

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  8. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  9. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

随机推荐

  1. 制作Linux(Fedora、Ubuntu、CentOS)优盘启动

    随着嵌入式技术的快速发展,Linux快速发展过一段时间.虽然现在不是很热,但是linux在现实社会的使用还是很有用处.而光盘有有些落伍,不仅浪费而且不环保,所以质优价廉的优盘就脱颖而出.所以,用优盘制 ...

  2. poj3308 Paratroopers --- 最小点权覆盖-&gt;最小割

    题目是一个非常明显的二分图带权匹配模型, 加入源点到nx建边,ny到汇点建边,(nx.ny)=inf建边.求最小割既得最小点权覆盖. 在本题中因为求的是乘积,所以先所有取log转换为加法,最后再乘方回 ...

  3. db link 连接不上

    两边的数据库,不在一个地方.都是oracle. 试了很多次,有时提示连接拒绝,有时连接不上.后来改了dblink的创建脚本,如下,才成功了. -- Create database link creat ...

  4. 知识点3-6：HTML辅助方法

    顾名思义,HTML辅助方法(HTML Helper)就是用来辅助产生HTML之用,在开发View的时候一定会面对许多HTML标签,处理这些HTML的工作非常繁琐,为了降低View的复杂度,可以使用HT ...

  5. django学习之Model（一）

    认认真真学Django,从现在开始. 学习资料来源于官方网站:https://docs.djangoproject.com/en/1.6/ 1-新建一个models.py from django.db ...

  6. android sdk国内快速更新下载

    Android SDK在线更新镜像服务器 http://www.androiddevtools.cn/ 目前正在使用的是:包含详细的配图流程 http://android-mirror.bugly.q ...

  7. intent.getAction()

    这个是发送端注册上的IntentFilter filter = new IntentFilter( Intent.ACTION_MEDIA_SCANNER_STARTED); filter.addAc ...

  8. Linux内核源代码解析之——sock's buffer参数

    本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/11539695 关于socket与sock的关系再简单 ...

  9. ioctl、文件操作接口函数以及nand的升级模式的操作过程详解

    概述 内核中驱动文件的操作通常是通过write和read函数进行的,但是很多时候再用户空间进行的操作或许不是内核中公共代码部分提供的功能,此时就需要使用一种个性化的方法进行操作--ioctl系统调用. ...

  10. SQL窗体函數一例

    需求: MSSQL,列出服務實例中全部數據庫的例如以下信息: 數據庫ID.數據庫名.創建日期.數據文件類型.數據文件大小.數據庫總大小.文件所在路徑. 寫法(後面的百分比為所花時間占比): -- 连接 ...