在现代Web应用程序中，使用拖放功能可以大大提高用户体验。本文将介绍如何实现在一个浏览器窗口中拖放图片并将其放置到另一个浏览器窗口中。
什么是拖放？
拖放是指用户选择某个对象并将其拖动到目标区域的操作。在Web开发中，拖放通常用于文件上传、重新排序元素和创建交互式地图等场景。
拖放基础
HTML5规范提供了一些新的API来处理拖放事件。我们可以使用以下三个事件来实现拖放：
- dragstart: 当用户开始拖动元素时触发
- dragenter: 当被拖动的元素进入可放置区域时触发
- drop: 当元素被释放到可放置区域时触发
<div id="dropzone"></div>
<img src="myimage.jpg" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', event.target.src)">上面的代码创建了一个可放置区域(dropzone)和一个可拖动的图像。当用户开始拖动图像时，我们将其src属性设置为数据传输对象(event.dataTransfer)的文本类型(text/plain)。这使得在放置时可以读取到拖动的图像。
接受来自其他浏览器窗口的拖放
为了接受来自其他浏览器窗口的拖放图片，我们需要使用如下方法：
-- -------------------- ---- -------
----------------------------------- ----------- -
-------------------
---
------------------------------- ----------- -
-------------------
----- ------------ - ---------------------------------
-- ------------------------------------------- -
----- --- - ------------------------------
------- - -------------------------------------
-------------------------------
-
---上面的代码中，我们将在全局范围内监听dragover和drop事件。在dragover事件处理程序中，我们调用e.preventDefault()以阻止浏览器默认的行为，这样就可以将拖动图像放置到浏览器窗口中了。
在drop事件处理程序中，我们首先再次调用e.preventDefault()以阻止浏览器默认的行为。然后我们使用e.dataTransfer.files获取拖放操作中传输的文件，并检查第一个文件是否是图像类型。如果是，我们创建一个新的img元素，并设置其src属性为URL.createObjectURL()返回的URL。最后，我们将图像添加到文档中。
进一步优化
以上代码可以实现简单的拖放功能，但是也有一些问题和优化的空间。
支持多个文件
如果用户一次选择多个图像文件并将它们拖到浏览器窗口中，我们可以修改代码以遍历所有文件并在文档中放置它们。
预览图像
在用户拖放图像之前，我们可以显示图像的预览。这可以通过使用FileReader API来实现。
-- -------------------- ---- -------
------------------------------- ----------- -
-------------------
----- ------------ - ---------------------------------
------------------------- -- -
-- -------------------------------- -
----- ------ - --- -------------
---------------------------
------------- - ---------- -
----- --- - ------------------------------
------- - --------------
-------------------------------
-
-
---
---上面的代码中，我们使用forEach方法遍历全部文件。对于每个图像文件，我们创建一个新的FileReader对象并调用其readAsDataURL()方法来读取文件内容。然后在onload事件处理程序中设置img元素的src属性为
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30156