<!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>
效果图：
相关推荐
- **第33章：使用Ajax（第二部分）**：深入探讨了Ajax的高级应用，如异步文件上传、实时更新数据等。 - **第34章：多媒体处理**：讲解了如何在HTML5中集成音频和视频内容。 - **第35章：使用画布元素（第一部分）**...
第15章 HTML 5中的文件与拖放 280 视频讲解：40分钟 15.1 选择文件 281 15.1.1 通过file对象选择文件 281 15.1.2 使用blob接口获取文件的类型与大小 282 15.1.3 通过类型过滤选择的文件 283 15.2 ...
- **第1章：HTML5概览** 本章详细介绍了HTML5在不同浏览器和智能终端设备中的支持情况。通过这一章的学习，读者可以了解到哪些浏览器和设备已经支持了HTML5的哪些特性。 - **第2章：Canvas绘图技术** Canvas ...
3. **第三章**：HTML5的离线存储是一个重要话题，通过`localStorage`和`sessionStorage`，开发者可以实现网页数据的本地存储，使得应用在网络断开时也能正常运行。 4. **第五章**：音频和视频处理是HTML5的一大亮点...
- **语义化标签**：从第二章到第三章，作者们详细讲解了HTML5新增的语义化标签，如`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`等，这些标签不仅增强了网页内容的意义表达，还为搜索引擎...
第33章 OLE DB模板 第34章 TCP/IP，winsook和winInet 第六部分 Interact编程 第35章 Microsoft Intornet信息服务器（iis） 第36章 ActiveX文档服务器及Internet 第37章 动态HTML介绍 第38章 Windows CE...
第三章：绘图工具 详细讲解Flash的绘图工具，如线条、矩形、椭圆、刷子、铅笔等，以及如何使用填色和渐变来丰富图形的视觉效果。此外，还介绍了路径编辑和形状修改技巧。 第四章：图层与帧 介绍图层的概念和作用，...
#### 第十三章：文档对象模型 DOM是Web页面的基础，它定义了文档的结构和行为。本章详细阐述了DOM的核心概念及其API使用方法，帮助开发者更好地操控网页元素。 #### 第十四章：表单 表单是用户与网站交互的重要方式...
第十三章讲解了如何使用jQuery来优化用户界面设计，比如使用提示框、进度条等功能来提升用户体验。 **14. 处理AJAX数据** 第十四章详细介绍了如何处理通过AJAX获取的数据，包括数据格式化、解析JSON等操作。这部分...
#### 第三十三章：如何为Siverlight控件设置背景图片 - **Background 属性**：通过设置控件的Background属性来应用背景图片。 #### 第三十四章：Javascript检测是否安装了Silverlight - **检测方法**：通过...
第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 以多种...
“第十三章.综合类”可能涵盖各种混合特效，比如拖放功能、滑动面板、下拉菜单等。这些特效通常需要结合CSS和HTML，展示JavaScript在复杂交互中的应用。 “第十四章.流行特效类”可能包含当前流行的网页元素，如...
设计视图允许用户通过直观的拖放方式添加和编辑网页元素，适合不熟悉HTML代码的新手；代码视图则显示HTML源代码，适合熟悉代码的开发者进行精确控制。 四、插入元素 在设计视图中，你可以轻松插入文本、图像、链接...
第三部 分使用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 ...