<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">div {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style>
<script type="text/javascript">
function dragover(ev){ ev.preventDefault(); }// allow drop
function dragstart(ev){
ev.dataTransfer.setData("text/plain",ev.target.id);
ev.dataTransfer.effectAllowed = "all";
ev.dataTransfer.dropEffect = "move";//copy
ev.dataTransfer.setDragImage( document.getElementById("ddd"), 10, 10);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text/plain");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<img id="ddd" src="../autocompleteEx/jquery-ui-1.10.3/themes/base/images/animated-overlay.gif"/>
HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动
<table border=1>
<thead><tr><td>dropzone(拖放目标区域)</td><td>draggable(被拖放元素)</td><td>说明</td></tr></thead>
<tbody>
<tr><td></td><td>dragstart</td><td></td></tr>
<tr><td></td><td>drag</td><td></td></tr>
<tr><td>dragenter</td><td></td><td></td></tr>
<tr><td>dragover</td><td></td><td>需调用event.preventDefault()阻止默认处理</td></tr>
<tr><td>dragleave</td><td></td><td></td></tr>
<tr><td>drop</td><td></td><td>放置被拖放元素</td></tr>
<tr><td></td><td>dragend</td><td></td></tr>
</tbody>
</table>
<pre>
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值。
“none”：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
“move”：应该把拖动的元素移动到放置目标。
“copy”：应该把拖动的元素复制到放置目标。
“link”：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。
dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下。
“uninitialized”：没有该被拖动元素放置行为。
“none”：被拖动的元素不能有任何行为。
“copy”：只允许值为“copy”的dropEffect。
“link”：只允许值为“link”的dropEffect。
“move”:只允许值为“move”的dropEffect。
“copyLink”：允许值为“copy”和“link”的dropEffect。
“copyMove”：允许值为“copy”和”link”的dropEffect。
“linkMove”：允许职位“link”和”move”的dropEffect。
“all”：允许任意dropEffect。
</pre>
<p>请把图片拖放到矩形中：</p>
<div ondrop="drop(event)" ondragover="dragover(event)"></div>
<br />
<img id="id" draggable="true" ondragstart="dragstart(event)" src="http://www.w3school.com.cn/i/w3school_logo_black.gif"/>
</body>
</html>
参照：
http://www.w3cmm.com/html/drag.html
http://www.w3.org/TR/html5/editing.html#dnd
http://www.w3school.com.cn/html5/html_5_draganddrop.asp
分享到：
相关推荐
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 目前浏览器支持情况：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。...
HTML5图片拖放功能是现代Web开发中的一个重要特性，它允许用户通过鼠标或触摸设备将图像从一个位置拖放到另一个位置，甚至可以在不同的浏览器窗口或应用程序之间进行操作。这一功能的实现基于HTML5的Drag and Drop ...
HTML5文件拖放功能是现代Web开发中的一个重要特性，它允许用户通过拖放操作在网页上上传或移动文件。这项技术极大地提升了用户体验，因为它简化了文件上传的过程，不再需要传统意义上的“浏览文件”按钮。在本篇博文...
仿回收站效果的设计与实现:在Windows等操作系统中均包含回收站功能，用户可以直接将不需要的文件拖拽并放置到桌面回收站图标上以实现文件删除。 图片相框展示的设计与实现:目前市面上一些修图工具软件带有自动为图片...
HTML5 引入了拖放API，这是一个允许用户通过拖拽动作在网页上移动元素的功能。这项API极大地丰富了网页的交互性，使得用户可以更直观地与网页内容进行交互。本文将详细介绍如何使用HTML5的拖放API，包括基本用法和...
HTML5 是一种强大的网页开发标准，它引入了许多新特性，其中拖放（Drag and Drop）功能是其中之一。这个特性使得用户可以直接通过鼠标或其他输入设备在网页上操作元素，实现元素的移动、复制或删除，极大地增强了...
HTML：HTML5拖放功能实现.docx
在Vue.js框架中，HTML5的拖放（Drag and Drop）API可以被巧妙地利用来创建交互式的用户界面，使得用户能够通过简单的拖放操作来重新排序列表、移动元素或者进行数据交换。在这个主题中，我们将深入探讨如何使用HTML5...
在Web开发中，HTML5引入了许多增强功能，其中之一就是拖放（Drag and Drop）API。拖放功能允许用户通过鼠标或其他输入设备抓取一个元素，并将其移动到页面上的另一个位置，极大地提升了用户体验。在HTML5中，拖放...
这个库提供了一个简单的HTML5拖放区域，使得在React应用中实现文件上传功能变得轻而易举。让我们深入探讨`react-dropzone`库以及如何在项目中使用它。 1. **react-dropzone库介绍** `react-dropzone`是基于React的...
html5仿购物车拖放商品到垃圾筒中删除，这一个和拖放式的购物车十分相似，你可按住鼠标左键，将右侧区域列表中的任意项拖动到垃圾箱中，列表中会减少一项内容，也就是你可以把选中的商品拖放到购物车中，实现购物车...
HTML5中的拖放简介： 在HTML5中，拖放是一种标准的特性，任何元素都可以被拖放。如果想让一个元素可以被拖动，那么需要把它的draggable属性设置为true。如果需要在开始拖动这个元素的时候执行一段代码，那么需要把...
HTML5拖放选择图片、删除选择功能，上边有几个按钮，分别是选择全部，全部不选，删除，也可以鼠标点选任意一个图片，点击Delete后可动态删除这张图片，当然只是在列表中删除，并不是真正把图片从硬盘上删除。HTML5...
HTML5的拖放功能是一种强大的交互式特性，它允许用户在网页中直观地移动元素，如文件、文本或图片，增强了用户体验。本章主要讲解了HTML5中的拖放实现方式和涉及的关键对象`dataTransfer`。 拖放实现分为三个主要...
仿回收站效果的设计与实现:在Windows等操作系统中均包含回收站功能，用户可以直接将不需要的文件拖拽并放置到桌面回收站图标上以实现文件删除。 图片相框展示的设计与实现:目前市面上一些修图工具软件带有自动为图片...
HTML5新增的拖放API为前端开发人员提供了一种便捷的方式，使得网页元素能够模拟现实世界中的拖拽操作，增强用户体验。以下是从给定文件中提取的相关知识点： 1. HTML5拖放API允许用户通过拖拽操作将文件或数据从一...
dragdroptouch, 在移动( 触摸) 设备上，支持HTML5拖放支持的Polyfill DragDropTouch支持HTML5拖放支持的Polyfill在移动( 触摸) 设备上的支持。HTML5规范包括对拖放操作的支持。 不幸的是，大多数移动浏览器都没有...
这款“html5 canvas可拖放互动的照片墙插件”利用了Canvas的强大功能，创建了一个允许用户交互的动态照片展示平台。在这款插件中，用户可以自由地对照片进行操作，如拖放、缩放、旋转和添加边框，极大地提升了用户...
在HTML5中，拖放是标准的一部分，任何元素都能够拖放，具体内容如下 1、拖放 XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html> <head> <style type=text/css> #div1 {...
HTML5+JS游戏开发模块中的图片拖放功能是利用HTML5的新特性，特别是Canvas元素，结合JavaScript编程实现的。Canvas是HTML5中的一个强大的绘图工具，允许开发者在网页上进行动态图形绘制，包括图像的移动、旋转、缩放...