前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >draggable 属性 原

draggable 属性 原

作者头像
申君健
发布2018-09-21 09:59:09
6410
发布2018-09-21 09:59:09
举报
文章被收录于专栏:前端侠2.0前端侠2.0

项目需求是做一个spliter,拖动后调整左右两边的布局大小!

昨天是在document上绑定mousedown ,mousemove ,mouseup事件,来实时计算,并设置相应元素的宽度,这是最直接想到的办法,就不再多说了!

今天又看到一个html5属性:draggable,就多了解一下了。

浏览器中,每个元素都可以拖动,默认是draggable="auto".此时它们的行为是浏览器赋予的,默认情况是:只有   选中文本,图片,超链接  是可以被拖动,并且拖动后,会把它的“值/链接地址”赋予拖动的事件中去。

如要普通元素可以拖动 ,只需要增加 draggable="true" 的属性。经测试在IE,CHROME中,它是正常的,拖动时,会有一个浅的影子跟随!

代码语言:javascript
复制
<div id="app" draggable="true"> 你可以试试拖动我! </div>

但firefox浏览器下,却没反应!去MDN上查一下说明,才知道,标准规定,须满足以下情况才行:

1、增加draggable属性

2、添加dragstart事件并设置drag data的值  

代码语言:javascript
复制
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</div>

此时:firefox浏览器下可以拖动,但没有浅的影子,

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017/06/15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
流计算 Oceanus
流计算 Oceanus 是大数据产品生态体系的实时化分析利器,是基于 Apache Flink 构建的企业级实时大数据分析平台,具备一站开发、无缝连接、亚秒延时、低廉成本、安全稳定等特点。流计算 Oceanus 以实现企业数据价值最大化为目标,加速企业实时化数字化的建设进程。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档