<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1{
width:488px;
height:250px;
padding:10px;
border:1px solid #aaaaaa;}
#div2{
width: 488px;
height: 250px;
padding: 10px;
border: 1px solid #ff00aa;
}
</style>
<script type="text/javascript">
//允许拖放
function allowDrop(event){
event.preventDefault();//默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式
}
//拖放
function drag(event){
event.dataTransfer.setData("Text",event.target.id);
}
//放置数据
function drop(event){
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
function drop2(event){
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>HTML5拖放图片</p>
<!-- ondragover事件规定在何处放置被拖动的数据 -->
<!-- ondragstart事件规定当元素被拖动时，会发生什么 -->
<!-- ondrop事件当放置被拖数据时，会发生 drop 事件 -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"/></div>
<br />
<img id="drag1" src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=7a3eb4ee97dda144de096bb082b5d009/e1fe9925bc315c6042417b128db1cb1348547772.jpg" draggable="true" ondragstart="drag(event)" />
<div id="div2" ondragover="allowDrop(event)" ondrop="drop2(event)"></div>
</body>
</html>
相关推荐
HTML5图片拖放功能是现代Web开发中的一个重要特性，它允许用户通过鼠标或触摸设备将图像从一个位置拖放到另一个位置，甚至可以在不同的浏览器窗口或应用程序之间进行操作。这一功能的实现基于HTML5的Drag and Drop ...
Droparea 是一个使用 HTML5 实现的图片拖放上传的 jQuery 插件。
HTML5文件拖放功能还支持文件预览，可以通过`FileReader` API读取文件内容并显示为图片或其他格式。同时，我们还可以限制拖放的文件类型，例如只允许上传图片或特定格式的文档。 总之，HTML5文件拖放是一项强大的...
HTML5+JS游戏开发模块中的图片拖放功能是利用HTML5的新特性，特别是Canvas元素，结合JavaScript编程实现的。Canvas是HTML5中的一个强大的绘图工具，允许开发者在网页上进行动态图形绘制，包括图像的移动、旋转、缩放...
仿回收站效果的设计与实现:在Windows等操作系统中均包含回收站功能，...图片相框展示的设计与实现:目前市面上一些修图工具软件带有自动为图片添加不同款式的相框功能，用户可以选择本地图片文件然后为其添加相框效果。
图片拖放效果.html
HTML5的拖放功能是一项强大的交互特性，使得用户可以通过简单的拖拽操作来移动或放置页面上的元素。在HTML5中，拖放功能已经成为标准的一部分，允许开发者为网页添加丰富的交互体验。以下是对拖放功能实现代码的详细...
通过这个压缩包，我们可以学习到如何使用JavaScript处理HTML5的拖放API来创建一个图片拖放展示区。 首先，我们要了解HTML5的拖放API。这个API允许开发者创建可拖动元素，并定义拖放行为。主要包括以下事件： 1. `...
在给定的"Js图片裁切、图片拖放和缩放实例.rar"中，我们可以深入探讨三个关键的JavaScript技术：图片裁切、图片拖放和图片缩放。 1. 图片裁切： 图片裁切是网页应用中常见的功能，通常用于上传头像或者预览图片。这...
这款“html5 canvas可拖放互动的照片墙插件”利用了Canvas的强大功能，创建了一个允许用户交互的动态照片展示平台。在这款插件中，用户可以自由地对照片进行操作，如拖放、缩放、旋转和添加边框，极大地提升了用户...
HTML5 引入了拖放API，这是一个允许用户通过拖拽动作在网页上移动元素的功能。这项API极大地丰富了网页的交互性，使得用户可以更直观地与网页内容进行交互。本文将详细介绍如何使用HTML5的拖放API，包括基本用法和...
html5仿购物车拖放商品到垃圾筒中删除，这一个和拖放式的购物车十分相似，你可按住鼠标左键，将右侧区域列表中的任意项拖动到垃圾箱中，列表中会减少一项内容，也就是你可以把选中的商品拖放到购物车中，实现购物车...
HTML5 是一种强大的网页开发标准，它引入了许多新特性，其中拖放（Drag and Drop）功能是其中之一。这个特性使得用户可以直接通过鼠标或其他输入设备在网页上操作元素，实现元素的移动、复制或删除，极大地增强了...
在IT行业中，实现类似云盘的图片拖放上传功能是一项常见的需求，这为用户提供了便捷的交互体验。本文将详细讲解如何使用JavaScript（JS）、jQuery（JQ）和AJAX技术来实现这一功能。 首先，我们需要理解拖放上传的...
HTML5拖放选择图片、删除选择功能，上边有几个按钮，分别是选择全部，全部不选，删除，也可以鼠标点选任意一个图片，点击Delete后可动态删除这张图片，当然只是在列表中删除，并不是真正把图片从硬盘上删除。HTML5...
在JavaScript的世界里，MooTools是一个...通过MooTools实现的图片拖放排序，不仅限于图片，可以扩展到任何需要排序的HTML元素，从而为用户提供直观、互动的界面体验。这个功能对于构建动态网页和富客户端应用非常有用。
实现标签拖放需要用到与图片拖放类似的事件处理，但可能需要额外处理元素的堆叠顺序和边界检测。 4. **Mui框架集成** Mui是一个轻量级的前端框架，特别适合移动H5应用开发。集成HTML5拖放功能，可以让Mui应用的...
仿回收站效果的设计与实现:在Windows等操作系统中均包含回收站功能，...图片相框展示的设计与实现:目前市面上一些修图工具软件带有自动为图片添加不同款式的相框功能，用户可以选择本地图片文件然后为其添加相框效果。
HTML5 文件上传与拖放API技术是现代网页应用中一种常用的功能，特别是在移动应用开发中。这个项目报告详细介绍了如何利用HTML5的拖放API来实现文件上传，包括相关技术的使用和具体实现步骤。 首先，HTML5的拖放API...