HTML5 拖放（Drag 和 Drop）简介

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

HTML5 拖放实例

下面的例子是一个简单的拖放实例：

实例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(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><p>拖动 RUNOOB.COM 图片到矩形框中:</p><div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" οndragstart="drag(event)" width="336" height="69"></body>
</html>

它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true">

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

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

function drag(ev)
{ev.dataTransfer.setData("Text",ev.target.id);
}

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

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

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

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

event.preventDefault()

进行放置 - ondrop

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

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));
}

代码解释：

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

HTML5 拖放（Drag 和 Drop）简介相关推荐

html拖放数据库字段,利用HTML5拖放(Drag 和 Drop)实现Table间数据的交互
前言作为开发者,我们总是会不经意间的遇到一些令人头疼的需求.比如五彩斑斓的黑,根据手机壳变换APP的颜色等等,你说怎么办.虽然在一般情况下不会这么棘手,但是有些需求刚拿到的时候还是会一筹莫展. 表格 ...
HTML5 拖放Drag和drop用法以及事件介绍
dragstart:拖拽开始时在被拖拽元素上触发此事件 drag:拖拽过程中被拖拽的元素会持续不断地发drag事件. dragend:鼠标在拖放目标上释放时,在拖搜元素上触发,将元素从浏览器拖放到操作 ...
html5 drag this,HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例
本文简单介绍一下HTML5的拖放实现.MXGHTML5中文学习网 - HTML5先行者学习网拖放(Drag 和 drop)是 HTML5 标准的组成部分.MXGHTML5中文学习网 - HTML5先 ...
html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
iOS开发Drag and Drop简介
1.Drag and Drop简介 Drag and Drop是iOS11的新特性,可以将文本.图片进行拖拽到不同app中,实现数据的传递.只不过只能在iPad上使用,iPhone上只能app内部拖拽 ...
基于html5拖(drag)放(drop)实现换装小游戏
编码环境:asp.net mvc3 html5 运行环境:firefox浏览器通过. 一:有关html5的拖放功能,网上介绍的一大把,我将自己学习到的知识点总结如下: 1:全局属性draggable ...
[Ext JS 4] 拖放[drag and drop]
定义拖放一个拖动操作,就是在某个页面元素上按下鼠标并移动.一个放下操作,就是在拖动动作之后放开鼠标.可以从下图来看: Ext JS 的Ext.dd 类中定义了基本的拖放操作. 拖放类的组织所有的拖 ...
H5 拖放drag跟drop
H5的拖放功能主要是通过drag和drop来实现的,目前IE9.Firefox.Opera 12.Chrome 以及 Safari 5 是支持拖放的,Safari 5.1.2 中不支持拖放.下面先放一 ...
拖放(Drag和Drop)--html5
拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...

HTML5 拖放（Drag 和 Drop）简介

HTML5 拖放（Drag 和 Drop）简介相关推荐

最新文章

热门文章