重点解释：

首先，为了使元素（如本图片）可拖动，把 draggable 属性设置为 true ：

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

当放置被拖数据时，会发生 drop 事件。

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素（目标元素）中

结果----》

拖动前

拖动后

再拖动回去

........

在两个 <div> 元素之间拖放图像--- 代码清单：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <style type="text/css">

            #div1,#div2{ float:left; width:150px; height:50px; margin: 10px; padding: 10px; border: 1px dashed #bbbbbb;}

        </style>

        <script>

            function allowDrag(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="allowDrag(event)">

            <img src="1.jpg" width="120px" height="50px" draggable="true" ondragstart="drag(event)" id="drag1" />

        </div>

        <div id="div2" ondrop="drop(event)" ondragover="allowDrag(event)">

        </div>

    </body>

</html>

HTML5 的拖放（实例：两个div之间拖放图片）的更多相关文章

  1. jmeter BeanShell实例-----两个变量之间的断言对比

    jmeter BeanShell实例-----两个变量之间的断言对比 在jmeter的中,断言没法对两个变量的进行对比后判断,只能使用Bean Shell断言来进行,总是有人来问怎么写呢.这里写一个简 ...

  2. jmeter BeanShell实例-----两个变量之间的断言对比(转)

    jmeter BeanShell实例-----两个变量之间的断言对比 在jmeter的中,断言没法对两个变量的进行对比后判断,只能使用Bean Shell断言来进行,总是有人来问怎么写呢.这里写一个简 ...

  3. 两个div之间有空隙

    加句*{ margin:0; padding:0;} 最近在做网页时发现,在IE7下(FF没试过),div与div之间有时会出20个像素左右的空隙,除非把margin设成负值,否则空隙无法去除.我在 ...

  4. 并排的两个div之间会有空隙

    两个并排的DIV会有如下图所示的空隙 是因为 代码中 两个DIV之前有个 ’回车‘ 这么写就OK了 可是为什么会有这种问题呢,是因为浏览器将 空格.回车.tab键等字符都当做一个空格处理,所以当你回车 ...

  5. 两个div之间的蜜汁间隙

    两个div左右相邻,想让他们紧挨在一起 加了margin:0:padding:0: 不知道为什么还是会有间隙. 然后在两个div的父元素加了:font-size:0: 就终于挨在一起惹.

  6. 关于两个DIV之间的空白字符

    首先!!!!这个问题应该是去面试前端会经常问到的问题!!! 如,下面这个例子: <!DOCTYPE html> <html lang="zh-CN"> &l ...

  7. 请问两个div之间的上下距离怎么设置

    转自:https://zhidao.baidu.com/question/344630087.html 楼上说的是一种方法,yanzilisan183 <div style="marg ...

  8. 设置两个div是总是不能重合,浏览器user agent stylesheet问题

    如图 两个div之间总是有一个空行,设置了margin为0还是没卵用,f12调试发现 多了一个user agent stylesheet样式,经百度是浏览器自带的样式 重新为div内的元素ul设置cs ...

  9. 让上下两个DIV块之间有一定距离或没有距离

    1.若想上下DIV块之间距离,只需设定:在CSS里设置DIV标签各属性参数为0div{margin:0;border:0;padding:0;}这里就设置了DIV标签CSS属性相当于初始化了DIV标签 ...

随机推荐

  1. 目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto

    “浏览器内核”主要指渲染引擎(Rendering Engine),负责解析网页语法(如HTML.JavaScript)并渲染.展示网页.因此,所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎,渲染引 ...

  2. 使用像素单位设置 EXCEL 列宽或行高

    在导出 Excel 的时候, 经常要需要给列设置宽度或给行设置高度, 在使用 NPOI 或 EppPlus 等组件进行操作的时候, 列宽和行高的单位都不是像素, 好像是英寸,具体是啥也说不清. 平常在 ...

  3. ssl协议，openssl，创建私有CA

    SSL是Security Socket Layer:安全的套接字层 他介于HTTP和TCP协议层之间 SSL是Netscape公司开发的,属于个人 TLS是标准委员会制定的 OpenSSL是SSL的开 ...

  4. （zxing.net）一维码UPC A的简介、实现与解码

    一.简介 UPC(Universal Product Code)码是最早大规模应用的条码,其特性是一种长度固定.连续性的条  码,目前主要在美国和加拿大使用,由于其应用范围广泛,故又被称万用条码. U ...

  5. 使用Hbuilder将自己app发布到App Store（一）

    1.如果你有mac系统那请看第二步. 首先需要一台虚拟机,还需要个插件要不没法装,都在这链接里面了 链接:https://pan.baidu.com/s/1N_pWJWFk-EJILTXuFr6w5g ...

  6. 自己从0开始学习Unity的笔记 VI （C#的for循环练习）

    最近学到了for循环,我觉得其实看情况吧,和while挺像的,不过适合于累加或者累减这类的,for循环要更好用一点 for循环首先格式是 ; i < length; i++) { } 意思很简单 ...

  7. WPF圆角按钮

    <ControlTemplate x:Key="CornerButton" TargetType="{x:Type Button}"> <Bo ...

  8. [文文殿下]基本的DP技巧

    . 二进制状态压缩动态规划 对于某些情况,如果题目中所给的限制数目比较小,我们可以尝试状态压缩动态规划.例如,题目中给出数据范围\(n<=20\),这个一般情况下是一个状压DP的提示. 状态压缩 ...

  9. LOJ#2190. 「SHOI2014」信号增幅仪（最小圆覆盖）

    题面 传送门 题解 我连椭圆是个啥都不知道导致这么简单一道题我一点思路都没有-- 我们把坐标系旋转一下,让半长轴成为新的\(x\)轴,也就是说所有点都绕原点逆时针旋转\(360-a\)度,然后再把所有 ...

  10. Microsoft Windows XP Professional X64 Edition Corporate Keys

    FVMK4-6DD4B-26MB4-74JB2-R4XWM DHR8W-69GX3-YWPM9-P98K2-B2V4Y DDR6D-XMQ6V-78Y2B-B6TP4-YXMRY J4K6H-DTTF ...