html在线拖拽环绕,用HTML5原生实现拖放或排序
原生拖放
拖放是一种很常见的功能,现在这个功能已经成为Html5标准的一部分。通过html5只需要简单几行代码即可实现拖放,比如下面这个例子,你可以将此图片上下拖放。
示例代码
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));
}
代码步骤
第一步: 要让一个元素可拖放
需要设置 draggable 属性
第二步: 拖放什么
在 ondragstart 事件中通过 dataTransfer.setData 设置拖放的元素function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
在这种情况下,是通过传递被拖放对象的ID来操作的,所以类型是"text"
第三步: 拖放到什么地方
通过 ondragover实现, 通常情况下,元素可能会被拖放到其它地方,当一个容器允许放置时,只需要在ondragover事件中 preventDefault 即可
function allowDrop(ev) {
ev.preventDefault();
}
第四步: 放置
在drop事件中将对象"转移"到容器中function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
这里通过appendChild实现转移拖放对象,同理可通过放置在不同位置实现排序。
相关事件
在拖放对象上触发的事件
ondragstart - 当用户开始拖放时
ondrag - 当用户正在拖放时
ondragend - 当用户拖放结束时
在放置对象(容器)上触发的事件
ondragenter - 当拖放对象进入容器时(首次)
ondragover - 当拖放对象经过容器时
ondragleave - 当拖放对象离开窗口时
ondrop - 当拖放对象释放到容器中时
DataTransfer
标准属性
DataTransfer.dropEffect 拖放的操作类型: copy、move、link 或 none (复制、移动创建链接等)
DataTransfer.effectAllowed 播放允许的类型: 比如有些容器只能复制,有些只允许移动等
DataTransfer.files 存放一些拖放的本地文件,如果没有拖放文件,则此列表为空
DataTransfer.items 只读 DataTransferItemList 对象
DataTransfer.types 只读 dragstart事件中指定的拖放类型
标准方法
DataTransfer.clearData() 清除指定类型的拖放数据
DataTransfer.getData() 获取指定类型的数据
DataTransfer.setData() 设置指定类型的数据
DataTransfer.setDragImage() 设置拖放时的自定义图标
支持: IE9及以上
参考:
html在线拖拽环绕,用HTML5原生实现拖放或排序相关推荐
- html在线拖拽环绕,jQuery实现html元素拖拽
代码很简单,效果非常棒,直接给大家上源码: html 定投金额 : 元 100 500 1000 2000 3000 4000 5000 6000 7000 8000 9000 10000 单位:元 ...
- html5div拖拽插件,jquery+html5多文件拖放上传插件jquery.filer
jquery.filer是一个简单的HTML5文件上传插件工具,彻底改变jQuery文件输入并使其支持同时选择多个文件,支持拖放,上传验证文件.大小.后缀名,显示缩略图,自定义上传类型图标,即时上传, ...
- 低代码可视化报表开源工具,只要在线拖拽就能做出复杂数据报表
平时苦于做报表的小伙伴们,今天TJ君给你们带来一个开源低代码可视化报表项目,JimuReport,来解决你们的报表难题! JimuReport,作为一个报表项目,它拥有类似excel的操作风格,简简单 ...
- 拖拽之路(原生之初一):自定义QListWidget实现美观的拖拽样式
环境配置 :MinGW + QT 5.12 效果图(左边是QListWidget传统拖拽样式,右边是自定义拖拽样式): 这种自定义拖拽样式的灵感来自于Chrome浏览器的书签栏.这篇文章命名为 &qu ...
- 在线拖拽html,html5拖曳操作 HTML5实现网页元素的拖放操作
HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown.mousemove.mouseup等API,通过大量的JS代码来实现:HTML5中引入了直接支持拖放操作的API,大大简化了网页元 ...
- JeecgBoot低代码平台 3.5.2,仪表盘版本发布!重磅新功能—支持在线拖拽设计大屏和门户
项目介绍 JeecgBoot是一款企业级的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue3,Mybatis-plus,Shiro, ...
- span标签的鼠标滑入提示_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽...
一.基于鼠标事件的拖拽 原理--onmousedown.onmousemove.onmouseup onmousedown 该事件会在鼠标按键被按下时触发 支持该事件的HTML标签: html < ...
- 拖拽即可创建HTML5网站的建站平台
摘要: 随着移动热潮的兴起,Flash 逐渐没落,HTML5 崛起,Wix也顺势推出了支持HTML5的拖拽建站技术,完全不懂技术的人也可以利用 Wix 建造跨越手机和 PC 浏览器的网站和应用. .. ...
- html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件.在HTM ...
最新文章
- 使用 .NET 实现 Ajax 长连接
- python如何处理异常_python如何进行异常处理
- 《中国人工智能学会通讯》——9.21 基于任务规划的资源卫星智能管控模式
- Json返回结果为null属性不显示解决方法
- c python通信protobuf_python 处理protobuf协议
- oracle insert 数组,oracle 数组 批量insert
- 三星s2 硬刷Android 8,三星T710(GALAXY Tab S2 8.0)一键救砖教程,轻松刷回官方系统...
- 步骤一:入门linux基础/01Linux简介和安装/001Linux基础
- javascript自制函数图像生成器
- java如何中断父类方法_java – 如何测试调用父类的受保护(不需要)方法的方法?...
- 0x01第一个汇编程序
- 一个网络传输框架——zeroMQ 调研笔记
- iOS之某公司iOS开发笔试题
- perl判断变量是数值_Perl学习12之defined undef使用
- External Libraries中没有Maven的jar包的原因(已解决)
- android usb 网卡驱动,安卓系统手机USB网络驱动
- 遗传算法在机器人路径规划中的应用研究(Matlab代码实现)
- java cnzz_cnzz 模拟请求登录(传入url get data ) demo
- android时光轴相册,Android之RecyclerView实现时光轴效果示例
- 使用POI为Excel添加数据有效性验证
热门文章
- php内li背景色,CSS_css中ul li的背景小图标属性设置的两种情况,这里我们分两种情况列出: ① - phpStudy...
- 老人 android 游戏,其乐融融 -- 给父母玩的游戏 #iOS #Android
- lambda函数if_Python中lambda的使用,与它的三个好基友介绍
- Springboot集成BeanValidation扩展二:加载jar中的资源文件
- 常微分方程的初始条件使用
- python 大文件以行为单位读取方式比对
- Python之十点半小游戏
- Pulseaudio调用alsalib write()流程(十六)
- C语言之如何理解指针的指针(九)
- repo一个新工程使用步骤