Question

我有一个带黄色按钮的图像。我想使用黄色按钮作为手柄，这样当我向上和向下拖动黄色div时，图像将跟随并上下移动。我的图像被约束到y轴，因此按钮必须在拖动时约束到y轴。

这是一个小提琴： 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()}
});

Answer 2

来自Draggable上的jQuery API：

如果指定，则限制从开始拖动，除非mousedown 发生在指定的元素上。只有来自的元素允许使用可拖动的元素。

所以我的猜测是你的按钮不是图像元素的后代。我尽力修复错误 - 虽然它并不完美，但我希望它能给你一个很好的起点。我通过将按钮和图像放在第二个容器（在现有容器中），为标签分配id以使功能更清晰，并为HTML / CSS添加了一些内容，使得句柄正常工作。完整更改位于：http://jsfiddle.net/beMaG/1/

关键领域是：

HTML：

<div class="wrapper">
    <div class="container" id="container1">
        <!--Here, I enclose another container in which button/image are inside-->
        <div class="containerNew" id="container2">
            <img class="headerimage" src="http://www.mywedding.com/main/honeymoon/images/beach_splash.jpg" />
            <div class="button" id="dragme"></div>
        <div>
    </div>    
</div>

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

2 个答案: