HTML5 拖放
html5 拖放
2023-06-13 09:16:01 时间
现在拖放(Drag 和 drop)已经是 HTML5 标准的组成部分。
什么是拖放呢?其实它是一种常见的特性,即通过抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够被拖放。
浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动。
HTML5 拖放示例下面是一个简单的拖放示例,通过该示例,您可以对HTML5种的拖放有一个初步了解:
html head meta charset= utf-8 title Linux265教程(ytso.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 拖动 LINUX265.COM 图片到矩形框中: /p div id= div1 ondrop= drop(event) ondragover= allowDrop(event) /div img loading= lazy id= drag1 src= /images/logo.png draggable= true ondragstart= 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 )。
放到何处 ondragoverondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 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 ) 把被拖元素追加到放置元素(目标元素)中你学会了吗?
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/59372.html
FireFoxlinuxphp相关文章
- HTML5 Canvas的简单使用
- cshtml标记html5,cshtml常用标签
- Hype 4 Pro for Mac(HTML5动画制作软件) v4.1.12中文版
- 给 Pokers 加上 HTML5 Web Notification
- vue 中基于html5 drag drap的拖放
- HTML5和CSS3新特性
- 通过 html5 FileReader 实现上传图片预览功能详解编程语言
- HTML5拖拽实例详解编程语言
- 深度探索 HTML5 与 MySQL(html5mysql)
- html5开发移动混合App系列1-开发环境搭建
- HTML5 Input
- HTML5 Web Workers
- HTML5 新元素
- HTML5 拖放