HTML5元素拖放设置总结

将元素图片放入div盒子内

1、首先设置元素为可拖放:在img标签内加入draggable=”true”.

<img draggable="true">

2、设置元素的拖动:在img标签中用ondragstart属性调用一个函数drag(ev),这个函数中用dataTransfer.setData()方法设置了被拖数据的数据类型和值.

<img ondragstart=”drag(event)”>

function drag(ev){

ev.dataTansfer.setData(“Text”,ev.target.id)//数据类型是Text,值是可拖动元素的id(“drag1”)。

}

3、放到何处-ondragover

在被放置的div中用ondragover来规定设置的允许设置,因为默认无法将数据/元素放置到其他元素中,如果需要允许放置,必须阻止对元素默认的处理方式。

这时候用ondragover来调用一个函数alloeDrop(ev),函数内部规定了event.preventDefault()方法用来阻止元素的默认处理方式

<div ondragover=”allowDrop(event)”></div>

function allowDrop(ev){

ev.prentDefault();

}

4、下面就是放置了-ondrop

在被放置的div中设置ondrop=”drop(event)”调用drop(ev)函数,函数中规定了放置的过程。

<div ondrop="drop(event)"></div>

Function drop(ev){

ev.preventDefault();//用来避免浏览器对数据的默认处理

  • var data=ev.dataTransfer.getData(”Text”);// 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

ev.target.appendChild (document.getElementById(data));// 被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素(目标元素)中

}

时间: 2024-12-21 17:55:14

HTML5元素拖放设置总结的相关文章

HTML5 元素拖放

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5拖放</title> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault();//取消默认 } function drag(ev) { //设置被拖数据的数据

HTML5原生拖放实例分析

原文链接:http://www.cnblogs.com/zhenwen/p/5855107.html HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如IE10和IE11.Edge对于dataTransfer.setData(format,data) ,只定义了"text"和"URL"两种有效的数据类型.而HTML5规范

HTML5 — 让拖放变的流行起来

在HTML5 出现之前,页面元素的拖放需要监听 mousedown.mouseover 以及 mouseup 等一系列事件,然后改变元素的相对位置来实现这一效果.HTML DnD(Drag-and-Drop)API 的出现,使得拖放变的简单.但是由于 DnD 尚处在草案阶段,各浏览器对其规范并未统一,有些事件在不同浏览器中会出现不同效果. 要使用 DnD,需要明确两件事情,一是需要拖动的元素,二是可放置拖动元素的位置.拖放无非是将元素从一个位置拖到另一个位置. Drag 首先我们需要指定要拖动的

HTML5元素整理

HTML5元素整理 HTML5 Canvas Canvas元素绘制工作在JS中完成, 首先找到元素: var c=document.getElementById("myCanvas"); 然后创建context对象: var ctx=c.getContext("2d"); getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. HTML5 拖放(Drag 和 Drop) 1 <

HTML5 文件拖放API讲解

本章向大家讲解一下HTML 5中文件API与拖放API的使用方法.HTML5的文件API,可以在浏览器中直接显示客户端文件的信息或文件中的内容,而通过拖放API,可以直接将位于客户端中的文件拖动到浏览器中,也可以单独拖动页面中的元素或者元素中的内容. HTML5拖拽文件预览效果图: 在线演示 以前,我们使用file控件,单击上传按钮后选择计算机中的文件.在HTML5中,我们可以先将计算机中的文件直接拖动到浏览器中进行预览,确定文件是我们所需要的,然后单击上传按钮将该文件上传到服务器端. 我们使用

HTML5元素分类

HTML5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性.级块性元素.行内语义性元素和交互性元素4大类. 1.结构性元素 结构性元素主要负责web上下文结构的定义 section:在web页面应用中,该元素也可以用于区域的章节描述. header:页面主体上的头部,header元素往往在一对body元素中. footer:页面的底部(页脚),通常会标出网站的相关信息. nav:专门用于菜单导航.链接导航的元素,是navigator的缩写. ar

不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什么手脚的话,IE6~IE8浏览器不支持HTML5元素, <nav>, <header>, <footer>, <article> … 然而,前篇Google前端规范HTML部分中提到:要使用语义的HTML5元素作为text/html, 考虑到Google不可能把

html5元素拖动 (转载黑桐)

HTML5 元素拖动 1.拖动元素img的相关设置: 设置元素可以拖动属性 draggable="true" 设置元素被拖动时触发的事件 ondragstart="drag(event)" 图片元素可拖动的完整代码 HTML: <img id="drag1" src="images/ycbt1.JPG" draggable="true" ondragstart="drag(event)&qu

HTML5 元素分类

HTML5元素分类:结构性元素.级块性元素.行内语义性元素.交互性元素. 目的:使文档的结构更加清晰明确: 增加新功能. 结构性元素:负责Web的上下文结构的定义,确保HTML文档的完整性. 1.1 section(给内容分段):在web页面应用中,该元素可以用于区域的章节表述. section 元素用于对网站或应用中页面上的内容进行分区,关注内容的独立性:一个section元素通常由标题及内容组成:section元素包含的内容可以单独存储到数据库中或输出到word文档中 1.2 header(