draggable 属性 原

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

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

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

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

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

<div id="app" draggable="true"> 你可以试试拖动我! </div>

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

1、增加draggable属性

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

<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</div>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

动态加载控件

参考文章:http://blog.csdn.net/yicko/archive/2005/04/16/349740.aspx 1、加载的是普通的控件,不是用户控...

2047
来自专栏九彩拼盘的叨叨叨

Firefox 使用小技巧

Sage: 体验性上,还是没有一些专业做rss 阅读器的好,比如feedly 以及 鲜果

752
来自专栏杨龙飞前端

移动端一个奇怪的触摸bug

1353
来自专栏守望轩

Visual Studio 2008 每日提示(四)

#031、 把编辑器的背景变成黑色 原文地址:http://blogs.msdn.com/saraford/archive/2007/09/06/did-yo...

3185
来自专栏听雨堂

asp.net中几种页面元素的比较

学习ASP.NET也快三个月了,今天才对页面中几种不同元素区分开,惭愧! 1)HTML元素:跟普通的网页中的标签所定义的一样,没有服务器端的事件响应,能够直接...

19410
来自专栏前端vue

4.添加导航、分栏布局,配置路由及对应页面、登陆、404

侧边栏的导航与页面相对应,根据导航栏新建对应页面(含登陆、404) src目录下新建views文件夹用来放视图文件

1394
来自专栏十月梦想

响应式媒体查询media的用法

        media媒体查询响应式可以实现什么效果?对于不同尺寸的设备相应不同的样式,但是不能兼容移动和pc端的全响应兼容.

1032
来自专栏疯狂的小程序

如何实现微信小程序的滚动加载功能

wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的

32810
来自专栏搞前端的李蚊子

微信小程序实现滚动加载更多

1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的...

5466
来自专栏微信小程序开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS 非HT...

5049

扫码关注云+社区