转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/31413767
本来准备写一个支持多图片拖拽上传的例子，但是为了更好的理解，先介绍一下HTML5的拖放。
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
被拖元素，dragElement :
1、添加事件：ondragstart
2、添加属性：dragable
放置元素，dropElement:
1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来说明。
1、页面上元素间的拖放
下面用个小例子，div间的拖放来展示，各个事件如何被触发：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
#dropEle
div
{
float: left;
}
</style>
<script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 拖放（Drag 和 drop）是 HTML5 标准的组成部分。
* 浏览器支持
*Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
*/
$(function ()
{
$("#dragEle")[0].ondragstart = function (event)
{
console.log("dragStart");
event.dataTransfer.setData("Text", event.target.id);
};
/**
* 当放置被拖数据时，会发生 drop 事件。
* 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
* @param event
*/
$("#dropEle")[0].ondrop = function (event)
{
/* for (var p in event.dataTransfer)
{
console.log(p + " = " + event.dataTransfer[p] + " @@");
}
*/
console.log("onDrop");
var id = event.dataTransfer.getData("Text");
$(this).append($("#" + id).clone().text($(this).find("div").length));
event.preventDefault();
};
/**
* ondragover 事件规定在何处放置被拖动的数据。
*默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
*/
$("#dropEle")[0].ondragover = function (event)
{
console.log("onDrop over");
event.preventDefault();
}
$("#dropEle")[0].ondragenter = function (event)
{
console.log("onDrop enter");
}
$("#dropEle")[0].ondragleave = function (event)
{
console.log("onDrop leave");
}
$("#dropEle")[0].ondragend = function (event)
{
console.log("onDrop end");
}
});
</script>
</head>
<body>
<div style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;"
draggable="true" id="dragEle" >
</div>
<div style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;"
id="dropEle"></div>
</body>
</html>
效果图：
效果图注意看下console面板的输出：观察每个事件何时被触发。
需要注意几点：
a、ondragover中必须组织事件的默认行为，默认地，无法将数据/元素放置到其他元素中。
b、drop 事件的默认行为是以链接形式打开，所以也需要阻止其默认行为。
还有可能注意到：在拖放时，event中包含一个event.dataTransfer 对象，上例中我们使用了该对象的setData方法传递了拖动div的id，然后在drop中取得该id，并且复制了该元素添加到放置的div中。
下面介绍下该对象的其他方法：
event.dataTransfer ：
setDragImage = function setDragImage() { [native code] } @@
我使用了js打印出了它所有的属性:
1、getData,setData上例已经使用了，clearData就是清除设置的数据。
2、值得注意的是files，当把操作系统中选择的一个或多个文件拖入该div中，files中会存储拖入文件的信息，然后我们通过file可以得到文件的类型，长度，内容然后实现上传。
3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。
4、types,effectAllowed和dropEffect分别是拖入元素的类型，拖拽过程中鼠标显示的样式，我觉得可以忽略了这几个属性，一般用不到。
分享到：
相关推荐
前18大旋转修整器企业占据全球87%的市场份额
SKYSAT IMAGERY PRODUCT SPECIFICATION PLANET.COM VIDEO Full motion videos are collected between 30 and 120 seconds by a single camera from any of the active SkySats. Videos are collected using only the Panchromatic half of the camera, hence all videos are PAN only. Videos are packaged and delivered with a video mpeg-4 file, plus all image frames with accompanying video metadata and a frame index file (reference Product Types below)
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
大学生，数学建模，美国大学生数学建模竞赛，MCM/ICM，历年美赛特等奖O奖论文
雷达物位变送器安装和操作手册
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
快速排序是一种基于分治策略的排序算法，通过选择一个基准元素，将待排序的数组划分为两个子数组，一个包含所有小于基准的元素，另一个包含所有大于基准的元素，然后递归地对这两个子数组进行快速排序。快速排序在平均情况下具有O(n log n)的时间复杂度，是一种非常高效的排序算法。然而，在最坏情况下，当输入数据已经有序或接近有序时，快速排序的性能会退化为O(n^2)。此外，快速排序是不稳定的排序算法，即相等的元素可能在排序过程中改变相对位置。尽管如此，快速排序仍然因其高效的平均性能而在实际应用中广泛使用。在Python3中，可以通过递归或迭代的方式实现快速排序算法，但为了避免额外的空间开销，通常会采用原地排序的方式来实现。
【作品名称】：基于51单片机的出租车计价器（昼夜） 含（程序、仿真图、流程图、原理图） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 出租车计价器： 1、不同情况具有不同的收费标准，具有白天和夜晚不同的计价能力 2、能进行手动修改单价 3、具有数据的复位功能（起步价，起步公里数，里程单价，白天晚上不一样） 4、能够在掉电的情况下存储单价等数据 5、步进电机模拟里程，一圈表示一里路
2024年中国API 11P往复式气体压缩机行业研究报告
附件是Windows 10系统上安装和配置Tomcat的步骤，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！
此试题是考试后回忆版本，你会发现是惊喜。恭喜你考个好成绩。
数据库+人大金仓+Linux系统安装
大学生，数学建模，美国大学生数学建模竞赛，MCM/ICM，2023年美赛特等奖O奖论文
opencv-python-4.5.4.60-cp36-cp36m-win-amd64.whl
减肥管理，全球前10强生产商排名及市场份额
内容概要：《上海大学大学生创新创业训练计划申请书（创新训练项目）》是用于申请参加上海大学的大学生创新创业训练计划的申请书，旨在帮助学生提出创新项目计划，获得培训和支持，促进学生创新创业能力的提升。 适用人群：适合上海大学的在校大学生，特别是对创新创业感兴趣、有创新想法和创业计划的学生，希望通过该计划获得指导和资源支持，实现自己的创业梦想。 使用场景及目标：申请书的使用场景是为了参加上海大学的大学生创新创业训练计划，目标是通过提交详细的创新项目计划，获得评审通过并获得培训、指导和资金支持，从而推动学生的创新创业实践和能力提升。 其他说明：申请书应包括清晰的创新项目描述、项目可行性分析、预期目标和计划、团队介绍等内容，以展现学生的创新能力和项目潜力。申请书的撰写需要认真准备，体现出学生对创新创业的热情和才华，以提高申请成功的机会。
IEC 60364-7-716-2023 低压电气装置.第7-716部分：特殊装置或场所的要求.信息和通信技术（ICT）电缆基础设施上的ELV直流配电.pdf
IEC PAS 61851-1-1 2023 电动汽车导电充电系统.第1-1部分：使用4型车辆耦合器的电动汽车导电带电系统的特殊要求.pdf
前11大客运渡轮服务企业占据全球30.3%的市场份额
wsl+MCgpu安装记录