HTML５——新增可拖动

这次我们来玩一个好玩的属性，draggable属性，先简单介绍一下

draggable

属性值：true／false

功能：用它修饰的所有标签变为可拖动（原本只有img元素和设置了ｈｒｅｆ属性的ａ标签默认可拖动）

接下来我们来玩一下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><div id="sourse" style="width: 80px;height: 80px; border:1px solid black;background-color: #bbb;" draggable="true">疯狂软件</div>
</body>
</html>

运行的结果就是＜ｄｉｖ＞可以被拖动了，因为它只能被拖动而不能停在拖动的位置，所以不太方便截图展示，大家可以把按我的代码敲一遍，或者直接粘走，运行看看

当然了，大家肯定会有疑惑，能拖不能放要它有啥用，那么接下来作者就通过编写ＪＳ事件监听来解决这个问题

首先要让它能够接受放下的这个事件

<script type="text/javascript">document.ondragover=function(evt){//接受放下return false;}
</script>

其次要让它能够记录下来被拖动到哪个位置并留在那里

<script type="text/javascript"> var sourse = document.getElementById("sourse");document.ondrop = function(evt){sourse.style.position = "absolute";sourse.style.left=evt.pageX+"px";sourse.style.top=evt.pageY+"px";return false;}
</script>

全部代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><div id="sourse" style="width: 80px;height: 80px; border:1px solid black;background-color: #bbb;" draggable="true">疯狂软件</div>
</body>
<script type="text/javascript">var sourse = document.getElementById("sourse");document.ondragover=function(evt){return false;}document.ondrop = function(evt){sourse.style.position = "absolute";sourse.style.left=evt.pageX+"px";sourse.style.top=evt.pageY+"px";return false;}
</script>
</html>

我们就可以拖动它了

如果还想让拖动携带数据的话，可以为拖动动作也设置一个监听


<script type="text/javascript">var sourse = document.getElementById("sourse");sourse.ondragstart = function(evt){//让拖动携带数据evt.dataTransfer.setData("text","www.taobao.com")}
</script>

当我们把元素拖到标签页栏

就打开了我们携带的数据ｗｗｗ．ｔａｏｂａｏ．ｃｏｍ淘宝网

这个属性非常好玩，大家可以一起来玩一下！

如果作者的文章有问题，欢迎批评指正，如果作者讲的还不够清楚，有朋友没有理解，也欢迎评论，我们一起探讨学习

HTML５——新增可拖动相关推荐

HTML5新增标签与属性
文章目录一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeho ...
HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
HTML5 新增 API
HTML5 新增 API 1. 选择器 API 2. 历史对象 API 3. 新增 Web 存储 API 3.1 Web 存储 API 类型 3.2 本地存储 localStorage 3.2.1 l ...
HTML5新增的拖拽属性draggable，怎么实现拖拽？
draggable定义和用法: 1.draggable 属性规定元素是否可拖动. 2.提示: 链接和图像默认是可拖动的. 3.提示: draggable 属性经常用于拖放操作. 注意:draggabl ...
HTML5新增的标签属性以及它们的用法
HTML5新增了一些标签,但它们并不像我们想象的那样陌生,它们只是更加符合我们的思维方式,更人性化.按照以往的布局方式,我们要划分页面结构时都是使用的div,例如<div class=" ...
HTML5新增了哪些标签
HTML5新增了哪些标签(来源网络) 标签标记意义及用法分析/示例属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸文章.博客条目.用户评论等内容. 支持HTML ...
哪一个不是html5新增的语义化标记元素,东师19春《HTML5开发基础与应用》作业考核【标准答案】...
<HTML5开发基础与应用>作业考核-0001 试卷总分:100 得分:0 一. 单选题 (共 30 道试题,共 60 分) 1.关于cookie存储机制下列说法不正确的是: A.简 ...
HTML5新增表单验证
HTML5新增属性: 属性描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则 ...
html5 新增属性了解
2019独角兽企业重金招聘Python工程师标准>>> autofocus 获取焦点 <input type="text" name="fna ...
HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...

HTML５——新增可拖动

draggable

HTML５——新增可拖动相关推荐

最新文章

热门文章