HTML5 的拖放(实例:两个div之间拖放图片)

重点解释:

首先,为了使元素(如本图片)可拖动,把 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

浏览器默认样式

浏览器都拥有一套自己的默认样式。 浏览器之所以有默认样式表,是为了没有样式表的页面也能凑活着看。 不同浏览器;以及版本不同的浏览器的默认样式一般都是不同的。

8720
来自专栏Hongten

pygame系列_mouse鼠标事件

E | hongtenzone@foxmail.com  B | http://www.cnblogs.com/hongten

31230
来自专栏柠檬先生

vue2.0 组件通信

组件通信:     子组件要想拿到父组件数据 props     子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件,     对...

235100
来自专栏IT开发技术与工作效率

Excel Post下载网址获取方法

22220
来自专栏偏前端工程师的驿站

JS魔法堂:IE5~9的Drag&Drop API

一、前言                                  《 HTML5魔法堂:全面理解Drag & Drop API》中提到从IE5开始...

202100
来自专栏前端说吧

Vue - 实战疑点总结

30970
来自专栏飞雪无情的博客

Ubuntu下使用搜狗拼音输入法

对于经常使用Ubuntu操作系统并且不会使用五笔输入法的屌丝来说,选择一种好的拼音输入法能让你事半功倍。在window下我们都知道搜狗的输入法比较好用,更有一些...

20530
来自专栏疯狂的小程序

分享:微信小程序中的分享事件

在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。

59790
来自专栏成猿之路

程序员word编写小记

大家看代码时,都希望有文档。但是我们平时又懒得写文档。为什么呢?今天写了一下,才发现,这和word的使用熟练程度有很大关系。

15430
来自专栏DT乱“码”

解决chrome测试的时候页面上的表单一直会自动填充

做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉。 下面上下图: ...

22670

扫码关注云+社区

领取腾讯云代金券