HTML5 实现拖拽
如图
可以从第一个方框拖拽花色到第二个方框中。
也可以再拖动回来。
具体代码实现
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 实现拖拽的更多相关文章
- HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- HTML5文件拖拽
HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...
- html5实现拖拽文件上传
以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
随机推荐
- c# 数据库编程(利用DataSet 和 DataAdaper对象操作数据库--单表操作)
一.概述 前面2篇文章,介绍了使用SqlCommand对象利用sql命令来操作数据库. 这篇文章我们来介绍使用c#的DataSet 和 DataAdaper对象操作操作数据库. 先来介绍下这两个对象是 ...
- lua序列化table表到文件中
先上代码 function luautil.serialize(t, sort_parent, sort_child) local mark={} local assign={} local func ...
- 【转】Lua脚本语法说明简介
Lua 的语法比较简单,学习起来也比较省力,但功能却并不弱. 所以,我只简单的归纳一下Lua的一些语法规则,使用起来方便好查就可以了.估计看完了,就懂得怎么写Lua程序了. 在Lua中,一切都是变量, ...
- 使用SHA1、SHA2双证书进行微软数字签名
微软是第一个宣布了SHA-1弃用计划,在2016年之后Windows和IE将不再信任SHA-1证书.正好我们公司的数字签名也到期了,索性就重新申请了sha256和sha1的新数字证书,用来给产品签名. ...
- Jquery学习笔记:利用find和children方法获取后代元素
在很多场景下,需要根据一个已知的jquery对象,去查找其满足条件的后代节点. 这时可以利用 find函数和children来处理. find和children函数都可有一个参数,常见的是一个字符串, ...
- xend调用xenstore的出错揭秘
近期发现几例问题,均是xend里面报了同一个错误 File "/usr/lib64/python2.4/site-packages/xen/xend/xenstore/xstransact. ...
- VMware Player 使用错误集锦
1.执行VMware Player 弹出"开机时出错:内部错误"的提示.虚拟机执行不了,例如以下图: 解决的方法: 以管理员身份执行. 可能如今登录windows的 ...
- linux服务之NFS和SAMBA服务
这几种网络文件传输最适合局域网.网络中用FTP 一:NFS服务 nfs(network file system)网络文件系统,改服务依赖于rpcbind服务.client通过rpc訪问server端的 ...
- 使用ffmpeg视频编码过程中踩的一个坑
今天说说使用ffmpeg在写视频编码程序中踩的一个坑,这个坑让我花了好多时间,回头想想,非常多时候一旦思维定势真的挺难突破的.以下是不对的编码结果: ...
- 利用d3.js绘制中国地图
d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...