<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:190px;height:210px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();//阻止控件的默认行为
}
function drag(ev)
{
//alert(ev.target.id);
ev.dataTransfer.setData("",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="5364690867118.gif" draggable="true"
ondragstart="drag(event)" width="184" height="206" />
<a href="http://www.w3schools.com" draggable="true" ondragstart="drag(event)" id="aaa">Visit W3Schools.com! </a>
</body>
</html>
一、概述
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.n HTML5, drag and drop is part of the standard, and any element can be draggable.
Make an Element Draggable
二、实现步骤
（1）
First of all: To make an element draggable, set the draggable attribute to true:
<img draggable="true" />
（2）
What to Drag - ondragstart and setData()
Then, specify what should happen when the element is dragged.
In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//把被拖到的组件放到Text中，在drop的时候再放到相应的组件中
}
In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").
（3）
Where to Drop - ondragover
The ondragover event specifies where the dragged data can be dropped.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event:
event.preventDefault()
Do the Drop - ondrop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Code explained:
Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)
Get the dragged data with the dataTransfer.getData("Text") method. This method will return any data that was set to the same type in the setData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
分享到：
相关推荐
"树菜单拖拽功能带拖拽特效"这一技术就是为了让用户能够更直观、更方便地操作数据，尤其是在处理层次结构数据时。这里我们将深入探讨如何实现这个功能。 首先，"树菜单"（TreeView）是一种常见的Windows控件，用于...
在本项目“QTreeWidget项目拖拽功能”中，我们关注的重点是实现QTreeWidget之间的拖放（Drag and Drop）操作。这种功能极大地提高了用户体验，让用户能够方便地重新组织和排列树中的项。下面，我们将深入探讨实现这...
在IT行业中，地图拖拽功能是一项常见的交互设计，尤其在Web应用中，它极大地提升了用户体验。这个功能通常基于JavaScript和jQuery库实现，并可能涉及到地图API，如Google Maps或OpenLayers等。在这里，我们讨论的...
在本主题中，我们将深入探讨如何利用JavaScript实现`DIV`元素的拖拽功能，同时也会提及到`Ajax`、`js`和`Asp.net`的相关知识。 **一、JavaScript拖拽功能** 1. **事件监听**：在JavaScript中，我们需要监听`...
1、ListCtrl和HeaderCtrl支持共用位图底图，可以整个应用程序使用同一张完整底图图片，完美实现换肤等需要；...8、ListCtrl实现列表项拖拽功能，可以鼠标左键拖拽任意一项到某位置后松开，从而将该项插入到该位置处。
为了提升用户体验，许多现代网页应用中都引入了表单元素的拖拽功能。本文将深入探讨"form表单拖拽功能"这一主题，结合提供的文件"FormbuildV1.0"，详细解释其背后的技术实现和相关知识点。 首先，我们需要理解HTML...
在网页设计领域，拖拽功能（Drag and Drop）是一种常见的交互设计技术，它极大地提升了用户在网站上的操作体验。Google的拖拽功能以其简洁、流畅和直观性著称，是许多开发者模仿和学习的目标。本篇文章将深入探讨...
RecyclerView进阶使用-实现仿支付宝菜单编辑页面拖拽功能, 这个是改版后的代码，代码包更小。 详细的说明在http://blog.csdn.net/cjs1534717040/article/details/78459821， 现在将这个代码设为免费,谢谢支持
" ListBox拖拽功能实现" ListBox控件是Windows Forms应用程序中的一种常见控件，它能够显示一组项目，并允许用户进行选择和拖拽操作。实现ListBox控件的拖拽功能，可以使用户更方便地在不同的ListBox控件之间移动...
在网页设计中，"div+css拖拽功能"是一种常见的交互设计技术，它允许用户通过鼠标操作页面元素，实现元素位置的自由调整。这个技术基于HTML的`<div>`元素和CSS（Cascading Style Sheets）来构建可拖动的层，并结合...
在IT行业中，表格的拖拽功能是一项非常实用的交互设计，尤其在数据管理和展示时，能够提高用户操作的便捷性和效率。这篇博文“表格的拖拽功能”通过一个实例展示了如何实现这一特性，配合给定的文件，我们可以深入...
在ECharts中，拖拽功能是一项实用的交互特性，允许用户通过鼠标操作直接在图表上调整数据点的位置，从而动态改变数据的呈现效果。这个功能在某些场景下非常有用，比如在数据分析、数据探索或模拟预测时，用户可以...
拖拽功能在现代网页和应用程序中非常常见，它允许用户通过鼠标或触摸设备直观地移动元素，提升用户体验。实现拖拽功能通常涉及到HTML、CSS和JavaScript的协同工作。以下将详细讲解拖拽功能的实现原理及步骤。 首先...
在Android开发中，实现拖拽功能以及悬浮窗效果可以极大地提升用户体验，使用户与应用的交互更加直观和便捷。本文将详细讲解如何在Android中创建一个具有拖拽功能的悬浮窗，并提供相应的代码示例。 首先，让我们了解...
在实际开发中，我们经常需要实现表格列的拖拽功能，以方便用户根据需求自定义列的顺序。这个压缩包文件提供的代码示例就是关于如何在 ElementUI 的 Table 组件中实现这一功能的。 首先，我们要理解 ElementUI 的 ...
在这个场景中，我们关注的是如何利用EasyUI实现表格数据的拖拽功能，特别是数据的横向拖拽。 首先，"easyui框架实现的表格数据拖拽功能"是指通过EasyUI的API和事件处理，使用户能够通过鼠标拖放操作来改变表格中的...
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 具体说明，请参考：学习链接 npm官方演示： vuedraggable特性： 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery...
1、实现了图片的拖拽功能（换位置） 2、点选是否再拖拽的时候复制 3、选择图片添加进面板进行拖拽 4、创建一个源点进行拖拽 5、一键清除面板上的图片及源点 6、显示图片的位置、鼠标位置、便宜位置 图片拖拽功能：...
地图的拖拽功能是Web开发中的一个重要特性，尤其在地理信息系统（GIS）和导航应用中极为常见。这一功能使得用户可以通过鼠标或触摸设备在网页上移动地图，查看不同区域的信息，增强了交互性和用户体验。在本案例中，...