html5如何实现拖拽,HTML5 如何实现拖放
拖放是一种常见的特性,也就是抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
拖放事件
拖放是由拖动与释放两部分组成,拖放事件也分为被拖动元素的相关事件,和容器的相关事件。
被拖动元素的相关事件如下所示:
事件
描述
ondragstart
用户开始拖动元素时触发
ondrag
元素正在拖动时触发
ondragend
用户完成元素拖动后触发
容器相关事件如下所示:
事件
描述
ondragenter
当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover
当被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave
当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop
在一个拖动过程中,释放鼠标键时触发此事件
如何实现元素的拖放
我们通过上述的拖放事件来实现将下图“你好,侠课岛”,拖放到上面的矩形框中的演示效果:
首先创建一个HTML文本,用于测试代码,如下所示:
HTML5学习(9xkd.com)
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
你好,侠课岛!
然后,我们要给被拖动元素(也就是在上述的
标签上),设置一个 draggable 属性,此属性用于规定元素是否可拖动,当属性值为 true 时表示元素可拖动,为 false 表示元素不可拖动。
你好,侠课岛!
只有设置了 draggable 属性值为 true ,指定元素才能被拖动。
然后,我们要做的是点击被拖动元素 “你好,侠课岛!”,点击这个元素时需要触发一个 ondragstart 事件,ondragstart 事件会在用户开始拖动元素或选择的文本时触发。调用了一个 drag(event) 函数,在这个函数中规定被拖动的数据,如下所示:
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
代码中的 dataTransfer.setData() 方法用于设置被拖数据的数据类型和值。参数 Text 表示被拖动数据的数据类型,参数 e.target.id 是可拖动元素的 id。
接着,我们将要 “你好,侠课岛!” 拖动到元素容器范围内(矩形框中)。要实现这个步骤,需要在放置拖动元素的容器上绑定一个 ondragover 事件,这个事件用于规定在何处放置被拖动的数据。
默认情况下,是无法将一格元素放置到另外一个元素里面的,所以如果需要设置允许放置,则要在 ondragover 事件中加上 e.preventDefault() 方法来阻止默认行为。
function allowDrop(e){
e.preventDefault();
}
最后,就是要放置被拖动元素,也就是要在元素容器范围内松开鼠标。需要在元素容器上绑定一个 ondrop 事件,如下所示,这个事件会在拖动过程中释放鼠标键时触发。
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
在 ondrop 事件中同样需要调用 e.preventDefault() 方法来阻止默认行为。然后可以通过 dataTransfer.getData("Text"); 方法获取之前的 drag(event) 函数中保存的信息,也就是被拖动元素的 id。接着通过 target.appendChild() 方法为将拖动元素作为元素容器的子元素追加到元素容器中,这样就能成功实现拖放。
完整代码
完整代码如下所示:
HTML5学习(9xkd.com)
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
你好,侠课岛!
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
function allowDrop(e){
e.preventDefault();
}
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
总结
当我们要对某个元素实行拖放操作时,首先就需将这个元素的 draggable 属性设置为 true,表示允许元素拖动。其中图片和链接默认是可拖动的,不需设置要 draggable 属性。
html5如何实现拖拽,HTML5 如何实现拖放相关推荐
- html5 字母单词拖拽,HTML5拖拽
最近遇到了这么一个问题,需要html能够拖动并且能够编辑,编辑加一个contenteditable这个属性就可以了. 但是拖动,出了问题,那就是,拖动的时候元素之间存在问题. 原来e.target获取 ...
- html5 上传超大文件,HTML5教程 如何拖拽上传大文件
本篇教程探讨了HTML5教程 如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
- html5拖动鼠标直线,html5的鼠标拖拽
鼠标拖拽 Title .one {width:200px;height:200px;border:1px solid blue;margin:10px;} .two {width:50px;heigh ...
- HTML5 drag drop 拖拽与拖放简介
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1419 一.前面的话 ...
- html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用 树形结构非常简单,t ...
- span标签的鼠标滑入提示_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽...
一.基于鼠标事件的拖拽 原理--onmousedown.onmousemove.onmouseup onmousedown 该事件会在鼠标按键被按下时触发 支持该事件的HTML标签: html < ...
- html5限制拖拽区域怎么实现,html5怎么实现拖拽
html5实现拖拽的方法:首先新建一个空的HTML5结构:然后在body元素中放置一个div:最后通过allowDrop,drag和drop三个函数实现拖拽功能即可. 本文操作环境:Windows7系 ...
- HTML5新增的拖拽属性draggable,怎么实现拖拽?
draggable定义和用法: 1.draggable 属性规定元素是否可拖动. 2.提示: 链接和图像默认是可拖动的. 3.提示: draggable 属性经常用于拖放操作. 注意:draggabl ...
- html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者
大家好,最近做的项目要用到拖拽排序,我现在的项目是 首先在 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import ...
最新文章
- 重磅!2020 中国高校毕业生月薪排名:清华第一,24所高校过万
- sudami和achillis对初学者的建议
- git 常用命令_git常用命令的使用
- kinect二次开发_Kinect for Windows SDK开发初体验(二)操作Camera
- JavaSist之ClassPool
- springboot去掉git版本控制_关于 Git 提交这些规范,你都遵守了吗?
- Kubernetes入门——深入浅出讲Docker
- DCMTK:DcmOtherLong类的测试程序
- python教材答案第六章_python第六章{输入和输出}
- css中的换行符_如何使用CSS防止项目列表中的换行符?
- 怎么用java跟数据库建立关系,java – 关系和构建数据库
- 英语四级真题作文 计算机,2019年12月英语四级写作范文:电脑
- spring boot +mybatis(通过properties配置) 集成
- python 生成空白矩阵_3个用于数据科学的顶级Python库
- kubernetes-dashboard部署
- JS基础-百度换肤案例
- 界面开发控件DotNetBar for WPF教程:MobileRibbon快速入门指南
- 使用微PE制作纯净版装机U盘(纯小白教程)
- java平均数函数_java求平均数的函数
- lattice开发错误集合
热门文章
- LINUX下ThinkPad指点杆设置
- 数组降序排列_Javase基础部分:数组排序(冒泡排序)(含视频讲解)
- Python爬取暴走漫画动态图
- 2020最新阿里巴巴必问的200个面试题以及答案,助你斩获阿里offer
- html 文字超出部分,CSS控制文字超出部分显示省略号方法
- S7-2服务器安装solaris 11系统说明书
- 理光2500文件服务器,理光打印机文件服务器地址
- mysql字符串包含insert_字符串中包含关键字,insert into不成功
- 智能ABC输入法的三个小秘密
- 微型计算机原理与接口技术 (周荷琴 冯焕清) 第六版 课后习题答案 第八章(部分答案)