使用Javascript进行drag&drop操作，示例代码如下：
这是drag&drop图片的例子：
<html>
<head>
<title>
System Drag And Drop Example
</title>
<script >
function handleDragDropEvent(oEvent){
var oTextbox =document.getElementById("text1");
oTextbox.value+=oEvent.type+"\n";
}
</script>
</head>
<body>
<form>
<p>Try dragging the image.</p>
<p><img src="c:/1.jpg" alt="" ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)" ondragend="handleDragDropEvent(event)" /></p>
<p><textarea rows="10" cols="25" readonly="readonly" id="text1"></textarea></P>
</form>
</body>
</html>
这是drag&drop文本的例子：
<html>
<head>
<title>
System Drag And Drop Example
</title>
<script >
function handleDragDropEvent(oEvent){
var oTextbox =document.getElementById("text1");
oTextbox.value+=oEvent.type+"\n";
}
</script>
</head>
<body>
<form>
<p>Try dragging the text from the left textbox to the right one.</p>
<p><input type="text" value="drag the text" />
<input type="text" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondragleave="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)" />
</p>
<p><textarea rows="10" cols="25" readonly="readonly" id="text1"></textarea></P>
</form>
</body>
</html>
分享到：
相关推荐
"使用Drag&Drop接受文件名的输入框"是一种创新的交互方式，它允许用户通过简单的拖放操作来输入文件路径或文件名，提高了用户体验和工作效率。这种功能在多种应用中都非常实用，比如文件管理器、编辑器或者上传服务...
HTML5实践Drag&Drop HTML5作为现代网页开发的标准，引入了许多新的特性和API，其中一项就是拖放（Drag&Drop）功能。这项技术允许用户通过鼠标或触控设备将元素从一个位置拖动到另一个位置，极大地提升了用户体验。...
标题中的“一个很不错的drag & drop”指的是使用拖放（Drag & Drop）技术的一个应用程序或功能，这在网页设计和开发中非常常见。拖放功能允许用户通过鼠标将元素从一处拖到另一处，实现数据的移动、拷贝或者进行其他...
JavaScript中的拖放（Drag & Drop）功能是一种交互式技术，允许用户通过鼠标操作将元素从一个位置拖动到另一个位置，常用于文件管理、界面构建和游戏开发等场景。在这个"Drag & Drop in JavaScript"项目中，我们可能...
"Drag & Drop Modules" 是一个关于使用拖放功能在JavaScript虚拟机2（JSVM2）中构建模块化应用的示例。这个主题涉及到前端开发中的交互设计和模块化编程两个重要概念。 首先，让我们深入了解“Drag & Drop”技术。...
标题“Drag & Drop Files to Delete.zip”提示我们这是一个与JavaScript相关的项目，可能涉及到文件操作，特别是拖放（Drag & Drop）功能，用于删除文件。在Web开发中，这种功能允许用户通过简单的拖放操作来处理...
此外，"Drag & Drop-crx"的英文界面表明它主要面向国际用户，可能不支持中文或其他语言，因此对于非英语使用者来说，可能需要一定的英语基础来理解和操作。同时，由于它是针对特定环境（如BPO和Phoenix系统）设计的...
使用 jquery + Drag & Drop API 对图像进行排序的代码 日期 12月7日（周日） 我想做的事 展示熟人的照片。制作一个按年龄排序的测验应用程序 结果 将从DB获取的数据保存在模型（JavaScript对象）中后，在视图侧改变...
2. JavaScript/jQuery：使用JavaScript或jQuery处理拖放事件。当用户开始拖动商品时，记录相关信息；在目标区域（如购物车图标）上触发`drop`事件时，调用PHP接口将商品添加到购物车。 3. AJAX通信：通过AJAX异步...
本篇文章将深入探讨如何使用jQuery实现拖放(Drag and Drop)功能，特别是针对图片的拖放操作。拖放功能是网页交互中常见的一种增强用户体验的方式，常用于文件上传、页面元素排序等场景。 首先，我们需要引入jQuery...
5. **drop事件**：在目标区域释放元素时触发，此时可以读取DataTransfer对象中的文件并进行上传操作。 6. **dragend事件**：拖放操作结束时触发，无论是否成功。 描述中的"DnDUploader_IN_MVC_SenchaCMD"暗示这是一...
本文将详细介绍Drag and Drop API的基本概念、事件处理、以及如何在JavaScript中使用这个API来实现拖拽功能。 Drag and Drop API为Web应用带来了强大的交互性。通过本文的介绍和示例代码，开发者应该能够理解并实现...
拖放（Drag and Drop，简称DnD）是一种常见的用户交互模式，允许用户通过拖动元素到目标位置来实现数据操作。在Web应用中，这种功能可以极大地提升用户体验，尤其是在处理列表排序、文件管理等场景下。Vue DnD ...
drag-drop-tree 是一个专门针对拖放功能的JavaScript库，允许用户通过拖拽操作来重新排列树的结构。这种库对于需要高度用户交互的应用非常有用，比如文件管理器或者任务管理器。拖放功能的实现涉及到HTML5的drag ...
在JavaScript的世界里，MooTools是一个轻量级且强大的库，它提供了许多实用的功能，包括对DOM操作、事件处理、动画效果以及高级功能如拖放（Drag & Drop）。本篇文章将详细探讨如何利用MooTools 1.2.1版本实现拖拽...
JavaScript中的拖放(Drag and Drop)功能是一种交互式技术，允许用户通过鼠标操作来移动元素，常用于网页上的文件管理、图像布局或者游戏设计等场景。在这个“Drag and Drop using Javascript.zip”压缩包中，可能...
html div drag/drop 拖拽实现 cookie记录位置用于构建灵活的个人门户等
我需要一个库，该库可以让我快速进行拖放操作并进行自定义，如果有任何错误，我将不会花费太多时间来理解该库。 所以我写了这个库。 它基本上是使用克隆的DOM通过移动树中的所有边界来移动情感并提高速度。演示版本...