下面的例子是一个简单的拖放实例：
引用
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
步骤：
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
分享到：
相关推荐
qt实现拖放文件到界面上，获取内容等 Qt 文件的拖放 drag - drop。该文章的demo的源码 https://blog.csdn.net/linbounconstraint/article/details/107518650
在Windows Presentation Foundation (WPF) 中，鼠标拖放操作（DragAndDrop）是一种常见的用户交互方式，它允许用户通过鼠标将一个元素从一处移动到另一处。这种功能在各种应用程序中都有广泛的应用，例如文件管理器...
Windows 操作系统中拖放操作（Drag & Drop）是一种常用的用户交互方式，允许用户在不同的程序窗口之间、同一个程序的不同窗口之间或同一程序同一窗口的不同控件之间进行移动、复制和粘贴等操作。拖放操作是在操作...
在工作当中，我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修，QQ空间装扮等，小到一些游戏等等随处可见拖放的使用场景。...HTML5 Drag Drop 拖放例子 dragenter
在Windows操作系统中，拖放（Drag and Drop）是一种常见的用户交互技术，允许用户通过鼠标将一个对象从一处“拖”到另一处“放”，以执行各种操作，如移动文件、复制数据或在应用程序之间传递信息。Windows API 提供...
总结起来，Drag and Drop Component Suite 3.7为Delphi开发者提供了一套完整的工具集，使得实现拖放功能变得更加简单和高效。无论是在文件管理、数据迁移，还是在创建自定义控件的过程中，这一组件包都能显著提升...
在现代Web开发中，拖放（Drag and Drop）API提供了一种直观的方式来处理用户与网页元素之间的交互。通过使用HTML5的拖放API，开发者可以实现元素在页面上的拖动和放置，从而增强用户体验。本文将详细介绍如何在...
在Android开发中，拖放（Drag and Drop）功能是一种常见的用户交互方式，允许用户通过手势将一个对象从一处移动到另一处。这个功能在许多场景下都非常实用，比如整理应用抽屉、移动文件或者在布局中调整控件位置等。...
Vue DnD Mobile，全称为"Vue Drag and Drop Mobile"，是专门为Vue.js开发的一个拖放库，专为移动设备优化，使得在触摸屏上的交互变得更加自然和流畅。 拖放（Drag and Drop，简称DnD）是一种常见的用户交互模式，...
【深度VMware6.0完美精简汉化版+Drag&Drop_FixPatch】是一款针对VMware Workstation 6.0的专业优化版本，它结合了深度定制和汉化，为用户提供更加符合中文用户习惯的操作界面。VMware Workstation是一款强大的虚拟机...
在Android开发中，拖放（DragAndDrop）功能是一个常用且有趣的交互方式，它允许用户通过手势将一个视图移动到另一个位置，或者在不同的视图之间传递数据。本示例将详细介绍如何实现一个简单的拖放操作，并解决你在...
"Qt Drag Drop之拖放.zip"可能包含一系列的示例代码和教程，帮助开发者理解和实现Qt中的拖放操作。 首先，我们需要了解Qt中的拖放涉及到的主要类。`QDrag`是处理拖动操作的核心类，它负责创建一个拖动动作并管理...
在IT行业中，文件拖放（Drag and Drop）是一种常见的用户交互技术，允许用户通过鼠标将一个元素从一处拖动到另一处，常用于文件管理、应用程序界面操作等场景。本资料"DragandDrop.rar_dragAndDrop"聚焦于在Internet...
在IT领域，尤其是在Java开发中，拖放（Drag & Drop）功能是用户界面设计中一个重要的交互元素。本文将深入探讨“drag-drop-folder-tree.rar”这个压缩包所包含的资源，它提供了一个强大的动态树视图，支持节点的拖放...
Qt之QToolButton与QGroupBox实现动态拖拽Drag、Drop功能，可以随意拖放到QGroupBox内，也可以与现有的QToolButton交换位置，也可以拖拽出QGroupBox外释放
【标题】"DragAndDrop_Demo源码"是关于C++编程的一个...通过深入研究DragAndDrop_Demo源码，开发者不仅可以掌握C++中拖放功能的实现，还能提升对GUI编程、事件处理和数据传输的理解，为今后的项目开发积累宝贵经验。
总的来说，"Delphi Drag Drop 拖放组件"是一个强大的工具，可以显著提升Delphi应用程序的交互性和用户友好性。它简化了开发者的工作，提供了丰富的功能，同时通过示例代码加速了学习过程。无论是新手还是经验丰富的...
拖放（Drag & Drop）在Eclipse RCP中的实现涉及到多个组件和接口，主要包括以下几个关键知识点： 1. **Drag Source**: 拖动操作的起始位置，通常是用户界面中的一个可交互元素，如表格、树或按钮等。在Eclipse RCP...
在Delphi编程环境中，实现Windows应用程序的交互性和用户友好性，往往离不开“拖放”（Drag & Drop）功能的支持。Drag&Drop VCL是针对这一需求而设计的一套组件库，它基于Windows Shell，允许开发者轻松地在应用程序...
标题中的“一个很不错的drag & drop”指的是使用拖放（Drag & Drop）技术的一个应用程序或功能，这在网页设计和开发中非常常见。拖放功能允许用户通过鼠标将元素从一处拖到另一处，实现数据的移动、拷贝或者进行其他...