Question

嘿所以我有一个html / php页面，其工具栏横跨浏览器顶部的整个宽度，从顶部向下约45个像素。工具栏包含在<div>中，并使用CSS进行样式设置。我希望栏能够被拖动到设定的高度，当用户释放栏时，它会快速回到原来的位置并执行任务（即重新加载或使用$.ajax酷的东西）。当用户将其拖动到y平面时，我希望条形图能够在高度上增长和缩小。我已经使用jquery ui小部件draggable完成了部分解决方案。这是我的代码：

//functions that handles topBarWrapper drags
$('.topBarWrapper').draggable({
    axis : 'y',
    appendTo : '.mainVideoPage',

    drag: function( event, ui ) {
        //Possible place to set height?
    },

    stop: function( event, ui ) {
        //resset offset and perfrom reload here
        $( this ).offset({ top: 0, left: 0 })
    }
});

上述代码几乎完成。我能够完成<div>并完成释放后，它会快速恢复原来的偏移并做一些事情。我似乎无法达到高度，任何想法？

Answer 1

我不确定实际更改高度，但是......这是一个解决方案，它涉及将一些可拖动内容隐藏在视口上方并将拖动约束到适当大小和定位的容器（检查小提琴，硬盘从这些片段中分辨出这是做什么的：）

http://jsfiddle.net/U2CRH/

<div class="topbar-container">
    <div class="topbar">
        <div class="topsection">
            <div>Pull down to refresh...</div>
        </div>
        <div class="dragger">Pull down...</div>
    </div>
</div>

.topbar-container {
    height:250px;
    position:absolute;
    top:-100px;
    right:0;
    left:0;
}
.topbar {
    width:100%;
    margin:0;
    height:150px;
    position:absolute;
    top:0;
    right:0;
    left:0;
}
.topsection {
    height:100px;
    margin:0;
    padding:0;
    background-color:lightblue;
}
.topsection div {
    padding-top:50px;
}
.dragger {
    height:50px;
    background-color:lightgreen;
    margin:0;
    padding:0;
}

$('.topbar').draggable({
    axis: 'y',
    appendTo: '.mainVideoPage',
    containment: 'parent',

    drag: function (event, ui) {
        //...
    },

    stop: function (event, ui) {
        var $this = $(this);
        if ($this.offset().top >= -20) {
            //perform reload
        } else {            
            $this.animate({
                'top': '0'
            });
        }
    }
});

jQuery - 创建下拉工具栏组件

1 个答案: