<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function allowDrop(ev)
{
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
ev.dataTransfer.dropEffect = 'link'
}
function drag(ev)
{
// 使用setData(数据类型，携带的数据)
// 方法将要拖放的数据存入dataTransfer对象
// ev.clearData();
ev.effeAllowed = 'all';
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
//使用getData()获取到数据，然后赋值给data
var data=ev.dataTransfer.getData("Text");
//使用appendChild方法把拖动的节点放到元素节点中成为他的子节点
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#tuo{
background: #e54d26;
width: 540px;
height: 320px;
}
#cun{
width: 540px;
height: 320px;
border: 2px solid #D2D2D2;
box-shadow: 1px 4px 8px #646464;
}
</style>
</head>
<body>
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img src="images/html5.png" id="tuo" draggable="true" ondragstart="drag(event)" width="500" height="280" / >
</body>
</html>
效果图：
相关推荐
第 5 章 : 使用正则表达式 第 6 章 : 使用 XML 第 7 章 : 使用本机 JSON 功能 第 8 章 : 处理事件 第 9 章 : 使用应用程序域 第 10 章 : 显示编程 第 11 章 : 使用几何结构 第 12 章 : 使用绘图 API 第 13 ...
第15章 HTML 5中的文件与拖放 280 视频讲解：40分钟 15.1 选择文件 281 15.1.1 通过file对象选择文件 281 15.1.2 使用blob接口获取文件的类型与大小 282 15.1.3 通过类型过滤选择的文件 283 15.2 ...
第33章 OLE DB模板 第34章 TCP/IP，winsook和winInet 第六部分 Interact编程 第35章 Microsoft Intornet信息服务器（iis） 第36章 ActiveX文档服务器及Internet 第37章 动态HTML介绍 第38章 Windows CE...
第3章 第一个Web应用程序 33 3.1 用循环进行重复操作 33 3.2 将值传递给函数 37 3.3 探测对象 39 3.4 处理数组 40 3.5 处理有返回值的函数 42 3.6 更新数组 43 3.7 使用do/while循环 44 3.8 以多种...
第三部 分使用Visio 2000进行绘图 第6章 使用基本绘图工具 6．1 绘制线条的主要按钮 6．1．1 使用LineTool(直线工具) 6．1．2 使用Arc Tool(弧线工具) 6．1．3 使用Freefom Tool(任意线工具) 6．1．4 使用...
第三部 分使用Visio 2000进行绘图 第6章 使用基本绘图工具 6．1 绘制线条的主要按钮 6．1．1 使用LineTool(直线工具) 6．1．2 使用Arc Tool(弧线工具) 6．1．3 使用Freefom Tool(任意线工具) 6．1．4 ...
第5章ActionScript3.0中的String对象 104 5.1创建String对象 104 5.2字符串处理 105 5.2.1字符处理 105 5.2.2字符串比较 107 5.2.3裁割与连接 108 5.2.4查找、匹配与替换 110 5.2.5提取子串 112 5.2.6大小写转换 113...
第1章 jQuery基础知识 1 1.1 jQuery的安装 1 1.2 选择DOM节点 2 1.3 延迟JavaScript的执行 3 1.4 把CSS应用到元素上 3 1.5 选择一系列非标准的HTML元素 4 1.6 计数DOM节点和显示其文本 5 1.7 获得一个元素的HTML...
第三部分数据库编程437 第13章ADO对象模型437 13.1 Connection对象439 13.1.1属性439 13.1.2方法442 13.1.3事件444 13.1.4 Errors集合446 13.2 Recordset对象446 13.2.1属性447 13.2.2方法455 13.2.3事件466 13.3 ...
第三部分数据库编程437 第13章ADO对象模型437 13.1 Connection对象439 13.1.1属性439 13.1.2方法442 13.1.3事件444 13.1.4 Errors集合446 13.2 Recordset对象446 13.2.1属性447 13.2.2方法455 13.2.3事件466 13.3 ...
第5章 面向对象（上） 107 5.1 类和对象 108 5.1.1 定义类 108 学生提问：构造器不是没有返回值吗？为什么不能用void修饰呢？ 110 5.1.2 对象的产生和使用 110 5.1.3 对象、引用和指针 111 5.1.4 对象的this...
第三章 网络 3.1 连接到服务器 3.1.1 套接字超时 3.1.2 因特网地址 3.2 实现服务器 3.2.1 为多个客户端服务 3.2.2 半关闭 3.3 可中断套接字 3.4 发送E-Mail 3.5 建立URL连接 3.5.1 URL和URI 3.5.2 使用URLConnection...
第5章 ext js的事件及其应用 / 170 5.1 概述 / 170 5.2 浏览器事件 / 170 5.2.1 绑定浏览器事件的过程：ext.eventmanager / 170 5.2.2 封装浏览器事件：ext.eventobject / 179 5.2.3 移除浏览器事件 / 181 5.3...
第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 ...
第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 ...
实例011 为项目添加第三方控件 13 实例012 为项目添加已有窗体 14 第2章 C#语言基础应用 15 2.1 代码的注释 16 实例013 对单行代码进行注释 16 实例014 快速对多行代码进行注释 17 实例015 使用“/”标记给代码段...
第5章 文件系统 215 5.1 创建和删除文件 216 实例167 创建和删除文件夹 216 实例168 建立临时文件 217 实例169 根据日期动态建立文件 218 实例170 把文件删除到回收站中 219 实例171 清空回收站 221 ...