<!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的绘图工具，如线条、矩形、椭圆、刷子、铅笔等，以及如何使用填色和渐变来丰富图形的视觉效果。此外，还介绍了路径编辑和形状修改技巧。 第四章：图层与帧 介绍图层的概念和作用，...
- **本地存储**：第二十三章关注客户端存储技术的发展，介绍了Cookie、LocalStorage、IndexedDB等机制。 - **离线应用**：此外，还讨论了如何构建能够离线运行的Web应用，包括Service Worker的作用及其实现方法。 #...
#### 第十三章：文档对象模型 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 使用...