社区
JavaScript
帖子详情
怎样把element拖拽出有overflow:scroll属性的div呢?
hetty1006
2007-01-25 05:39:34
我的页面要实现拖拽功能
类似
<div>
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
</ul>
</div>
这样是可以把li拖拽到任意地方
可是如果这样写就拖不出div了
<div style="overflow:scroll;width:200px;height:200px">
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
</ul>
</div>
...全文
281
2
打赏
收藏
怎样把element拖拽出有overflow:scroll属性的div呢?
我的页面要实现拖拽功能 类似 1 2 3 这样是可以把li拖拽到任意地方 可是如果这样写就拖不出div了 1 2 3
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
hetty1006
2007-01-25
打赏
举报
回复
啊~太感谢啦~~我怎么就没想到哪~~
xiao7cn
2007-01-25
打赏
举报
回复
思路:开始拖拽之前overflow设为hiden,放下之后overflow设置回scroll
JavaScript Table行定位效果
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code 1 2 3 4 给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如: Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id
属性
也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id
属性
设空。 ps:table请用class来绑定样式,用id的话新table就获取不了样式了。 克隆之后再设置样式: this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果,但table比较特别,测试下面的代码: Code
用JS有效解决移动web浏览器中HTML元素的
overflow
:
scroll
滚动
属性
失效问题
web移动平台前端UI开发工作,兼容问题超多,今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容,但内容条数未知;如果条数过多,容器显示滚动条。这鸟需求按说是So easy,容器设死宽、高,CSS加
属性
overflow
:
scroll
;完事!可拿设备去测的时候有趣了,Pc all browser正常,ios正常 ,android失效。泥马在android下效果与
overflow
:hidden
javascript必修课_offset,client,
scroll
家族
本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。我们将从最简单的点击事件、表单提交、元素改变颜色开始,一步步由浅及深学习JS的各种酷炫知识。最后我们还会学习Jquery框架,以提高你的前端开发效率。学完本课后,你将能独立做出与用户有复杂交互(表单、动画、视频等)的网站效果。
iOS Safari上
overflow
:
scroll
无法滑动解决
iOS Safari上
overflow
:
scroll
无法滑动解决 问题描述 此bug出现需要条件:父元素需使用绝对定位absolute或固定定位fixed,使用
overflow
:
scroll
/ auto(或
overflow
-y:
scroll
/ auto),内部子元素是动态大小(例如较大的svg docume...
js解决
overflow
:
scroll
失效问题
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的
overflow
:sceb浏览器中HTML元素的
overflow
:
scroll
滚动
属性
失效问题i
scroll
4webhtml5mobilejavascriptweb移动平台前端UI开发工作,兼容问题超多,今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容,但内容条数未知;如果条数过多,容器显示滚动条。这鸟需求...
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章