jquery - 使用按钮作为图像句柄拖动图像

Question

我有一个带有黄色按钮的图像。我想使用黄色按钮作为 handle ，这样当我上下拖动黄色 div 时，图像就会跟随并上下移动。我的图像被限制在 y 轴，因此同样按钮在拖动时也必须被限制在 y 轴。

这是一个 fiddle : http://jsfiddle.net/michelm/9Vwzp/

和 jQuery 代码:

$(function(){
    $(".headerimage").css('cursor','s-resize');
    var y1 = $('.container').height();
    var y2 = $('img').height();
    $("img").draggable({
        scroll: false,
        axis: "y",
        handle: "div.button" // this is not working
        drag: function(event, ui) {
            if(ui.position.top >= 0)
            {
                ui.position.top = 0;
            }
            else if(ui.position.top <= y1 - y2)
            {
                ui.position.top = y1 - y2;
            }
        },
        stop: function(event, ui) {
            //####
        }
    });                    
});

Answer 1

这是一个>>>JSFiddle<<<您正在寻找的功能的解决方案。

这是代码:

HTML:

<div class="wrapper">
    <div class="button"></div>
    <div class="container">
        <img class="headerimage" src="http://www.mywedding.com/main/honeymoon/images/beach_splash.jpg" />
    </div>
</div>

CSS:

.wrapper {
    position: relative;
    height: 150px;
    width: 700px;
    overflow: hidden;
}
.container {
    position: absolute;
    top: 0px;
    bottom: -250px;
    width: 650px;
}
.button {
    position: absolute;
    cursor: s-resize;
    background-color: yellow;
    opacity:0.6;
    border: 2px solid;
    border-radius: 25px;
    top: 0px;
    right: 10px;
    height: 20px;
    width: 20px;
    z-index:2;
}

jQuery:

var wrapHeight = $('.wrapper').outerHeight(true);
var contHeight = $('.container').outerHeight(true);

function drag() {
    var btnPos = $('.button').position().top;
    $('.container').css({
        top: -(btnPos * (contHeight / wrapHeight))
    });
}

$('.button').draggable({
    axis: 'y',
    containment: '.wrapper',
    drag: function () {drag()}
});