有的朋友可能会认为上面那个插件用起来还有点复杂，而且不能够被拖动。jQuery实现的这个插件很N，它就是jquery.bgiframe。
这个插件是下载地址是：http://plugins.jquery.com/project/bgiframe。
关键代码如下：
$('#div1').bgiframe;
以下是示例代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery.bgiframe()示例</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugin/jquery.ppdrag.js"></script>
<script type="text/javascript" src="js/plugin/jquery.bgiframe.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showMore0').each(function(){
var moreObj = $('#more0').bgiframe().ppdrag();
$(this).bind('click', function(e){
moreObj.show();
});
$('#btnClose0').click(function(){
moreObj.hide();
});
});
});
</script>
</head>
<body>
<br/>
<li>1. 防select穿透</li>
<li>2. 可拖动</li>
<hr/>
<div style="POSITION:absolute;left:200px;">
<span id="showMore0">测试</span>
<div id="more0"
style="display:none;POSITION:absolute;Z-INDEX:1000;background:gray;border:2px;width:200px;TOP: 18px;LEFT: 0px;border:2px solid black;">
<div>
<A style="CURSOR: hand" id="btnClose0" style="float:right;">［关闭］</a><br/>
效果不错吧!
</div>
</div>
<br>
<select></select>
</div>
</body>
</html>
下面是运行之后的效果图，不过要想看到拖动效果，你还得亲手运行一下试了才知道好不好用了。
分享到：
相关推荐
本文将深入探讨如何解决一个特定的IE浏览器问题：DIV元素在Internet Explorer（IE）下被下拉列表（select）穿透的问题。 标题提到的“解决DIV在IE下被下拉列表select穿透的问题(一)”是一个典型的老版IE浏览器渲染...
在互联网的早期，Internet Explorer 6 (简称IE6) 是一款广泛应用的浏览器，但它的兼容性和渲染机制存在诸多问题，其中一个问题就是“select穿透div”的现象。这个问题在现代浏览器中通常不会出现，但在IE6中，`...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用！！！
在网页设计中，`<select>`元素和其子元素`<option>`经常被用来创建下拉列表，供用户选择。然而，在某些情况下，特别是在固定宽度的`<select>`元素中，如果`<option>`的内容过长，可能会导致内容显示不全，只显示部分...
"解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子，它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中，我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序，从而让某些元素...
### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中，有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的，尤其是`z-index`值的设置不...
在网页设计中，有时我们可能需要使用自定义的下拉列表来替代HTML原生的`<select>`元素，以实现更复杂或者更具设计感的交互效果。这就是"div 模拟下拉列表"的主要应用场景。这个技术主要是通过CSS和JavaScript（通常...
在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中，包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先，`demo.html`是演示页面，它展示了如何在实际项目中应用这个插件。这个页面会包含一...
在IE6中，Select元素具有“下拉菜单”的特性，它会被渲染在页面的最顶层，即使它在HTML结构中位于其他元素（如Div）之下。这种行为是由于IE6对CSS层叠上下文理解的局限性，以及对z-index属性的不完全支持导致的。 ...
1. **响应式设计**：确保下拉列表在不同屏幕尺寸下也能正常工作，可能需要使用媒体查询（`@media`）进行调整。 2. **访问性和键盘导航**：为无障碍性（accessibility）考虑，确保用户可以通过键盘操作（如Tab键）来...
通过上述的方法，开发者可以解决select下拉列表在不同浏览器下默认样式不一致的问题，并通过JavaScript为用户提供更加美观和友好的交互体验。同时，使用这种方法也可以增强select的功能，比如添加搜索功能，支持多选...
标题 "DIV在IE6中被下拉菜单占据的问题" 指涉的是一个经典而棘手的前端开发问题，尤其在处理Internet Explorer 6（简称IE6）浏览器时。这个问题通常发生在使用CSS（层叠样式表）布局时，特别是涉及到浮动元素、定位...
在网页设计中，`<select>`元素通常用于创建下拉列表，用户可以在其中选择一个或多个选项。然而，标准的`<select>`元素通常只支持文本内容，不直接支持显示图片。但随着网页交互性的增强，设计师们有时需要在下拉列表...
在本案例中，"解决div总是被select遮挡的问题.rar"提供了解决方案，通过引入一个透明的`iframe`来规避这一现象。 首先，我们需要理解Z轴顺序的概念。在CSS中，`z-index`属性用于指定元素在堆叠上下文中的层级。具有...
这个插件，可能是名为“bgiframe”的插件（从压缩包子文件的文件名推断），被设计用来解决IE6下select遮挡div的问题。bgiframe插件会在被遮挡的元素上创建一个背景iframe，通过这种方式，即使在select控件存在的情况...
本知识点将详细讲解如何使用jQuery创建一个基于div的下拉框，实现下拉列表的功能。 首先，理解jQuery的核心概念。jQuery通过选择器选中DOM元素，然后对这些元素进行操作。例如，`$("#myDiv")`会选中ID为"myDiv"的...
第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好...