Javascript 无溢出的可滚动div:自动?
在我的应用程序中,我有两个div,其中一个有很长的产品列表,可以拖到另一个div(购物车)中。product div有溢出,但它破坏了原型可拖动元素。原型黑客非常突兀,并不能与所有浏览器兼容Javascript 无溢出的可滚动div:自动?,javascript,prototypejs,scriptaculous,Javascript,Prototypejs,Scriptaculous,在我的应用程序中,我有两个div,其中一个有很长的产品列表,可以拖到另一个div(购物车)中。product div有溢出,但它破坏了原型可拖动元素。原型黑客非常突兀,并不能与所有浏览器兼容 所以我采取了一种不同的方法,是否可以在不使用CSS的情况下使用可滚动的divoverflow:auto 您可以使用内容大于其窗口的框架。但是可能会使传递JS事件变得困难。有一个css属性来控制它 <div style="width:100px;height:100px;overflow:scroll"
所以我采取了一种不同的方法,是否可以在不使用CSS的情况下使用可滚动的div
overflow:auto
您可以使用内容大于其窗口的框架。但是可能会使传递JS事件变得困难。有一个css属性来控制它
<div style="width:100px;height:100px;overflow:scroll">
</div>
以下是我写的让它在IE 8.0.6和Firefox 3.6.3下运行的内容: 使
“宽度:100px;可滚动:自动”容器中的元素(带边框)可拖动:
function makeDraggable(container,tag) {
if(!container || !tag) { return false; }
$(container).select(tag).each( function(o) {
new Draggable(o,{
starteffect: function(e){makeDragVisible(container,e);},
endeffect: function(e){e.setStyle({'position':'','width':'','cursor':''});},
zindex: 1000
// , revert: ... // the other options
});
});
}
function makeDragVisible(container,element) {
if(!container || !element) { return false; }
var i=$(container).getStyle('width');
i=i.replace('px','');
i=Math.round(i-20)+'px';
element.setStyle({'width':i,'z-index':1000,'position':'absolute','cursor':'move'});
//
$(container).setStyle({});
}
重要提示:
重复z索引
注意'startefect'
末尾的容器样式丢失。光标和宽度只是为了方便用户拖动
我希望它能有所帮助。标题是“无溢出:自动”,很抱歉,这正是溢出:滚动的含义。