当darging并调整其父div时,GRIDSTER滚动不会移动

时间:2015-01-09 13:19:18

标签: javascript jquery css gridster

我需要在拖动和调整大小时移动父div #mainContainer的滚动条。 请帮我解决这个问题。

<div id="mainContainer" style="overflow:auto;">
    <div class="gridster">
<ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

    <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
    <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
    <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

    <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
</ul>

$(function(){ //DOM Ready

$(".gridster ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140]
});

});

检查此图片链接

http://tinypic.com/r/2rm9ydf/8

先谢谢

1 个答案:

答案 0 :(得分:0)

根据您的要求给出高度和宽度

<div id="mainContainer" style="overflow:auto;height:300px;width:95%;">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

<li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
 </ul>
    </div>
    </div>