一、实现标签元素的拖放步骤
由于要实现对某个元素的拖放功能，需要事先进行多个参数的设置，所以这里存在了步骤的概念，我们按照如下步骤进行即可，不必去了解为什么这样，因为就是这样设计的：
1、设置元素为可拖放
为了使某个元素可拖动，我们给他添加 draggable 属性，并且把 draggable 属性设置为 true ：
<img draggable="true" />
2、设置要拖动的内容（ondragstart 和 setData()）
设置当元素被拖动时，要拖动的内容是什么；这里需要给要拖动的元素添加 ondragstart事件（当元素开始用鼠标拖动时，会执行这里设置的函数），然后我们需要在事件的回调中设置拖动的内容，如下代码：
<img id="drag1" src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)" />
function drag(ev) {
//设置被拖数据的数据类型和值
ev.dataTransfer.setData("img",ev.target.id); //数据类型可以是任意字符 "img"，值是可拖动元素的 id ("drag1")
3、设置拖动元素可以放置的位置（ondragover）
默认情况下，我们无法将 数据/元素 放置到其他元素中。如下代码我们如果要将图片放置到另一个div容器中，需要设置这个div容器可以放置其他元素（给他添加ondragover 事件，ondragover 规定当我们拖动的元素经过它的时候，可以将拖动的元素放置到此处）：
<div id="div1" ondragover="allowDrop(event)"></div>
function allowDrop(ev) {
ev.preventDefault(); //必须阻止对元素的默认处理方式，表示设置允许放置，默认行为是以链接形式打开
4、设置拖动元素的新位置（ondrop）
当我们松开鼠标后，表示我们要放置被拖动的数据，这时会发生 drop 事件，我们要规定被拖动的元素需要放置的新位置，这里给div容器添加 ondrop 事件，如下代码：
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("img") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的数据
被拖元素数据 是被拖元素的 id ("drag1")
把被拖动图片元素 追加 到放置元素（目标元素）中
二、拖动一个图片到一个div容器中
<!DOCTYPE HTML>
<style type="text/css">
#div1 { width:300px; height:120px;padding:10px; border:1px solid blue; font-size:12px; text-align: center; }
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
function drag(ev) {
ev.dataTransfer.setData("img",ev.target.id);
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
</script>
</head>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">我是一个容器，请用鼠标拖动下面的图片移动到我上面</div>
<img id="drag1" src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)" height="100px" />
</body>
</html>
三、在两个 <div> 元素之间拖动图像
<!DOCTYPE HTML>
<style type="text/css">
#div1, #div2 {float:left; width:198px; height:100px; margin:10px;padding:10px;border:1px solid blue; text-align: center;}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
function drag(ev) {
ev.dataTransfer.setData("img",ev.target.id);
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
</script>
</head>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" height="100px" />
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
编程思维学英语系列课程上线了 - 全网独家首发 - 你从来没有见过的英语课，颠覆你认知的英语学习方法！
layui官方网站镜像站 官方文档镜像站
w3capi - 专业IT技术自学经验分享平台
Apache Cocoon 2.1.13 发布，开源的网页内容发布框架
FileZilla Client 3.49.0-rc1 发布，快速，实用多功能和界面直观的FTP客户端
IntelliJ IDEA 最新版 2020.1.3 发布
Paddle.js 1.0 发布，国内首个开源JavaScript深度学习库
Jboot v3.2.7 发布，开源的分布式、商业级微服务框架
Micronaut 最新版 2.0.0 发布，原生云原生微服务框架
Apache Storm 最新版 2.2.0 发布，分布式实时大数据处理、计算系统
