2

我有一个带有黄色按钮的图像。我想使用黄色按钮作为手柄，这样当我上下拖动黄色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) {
            //####
        }
    });                    
});
4

2 回答 2

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()}
});
于 2013-10-30T08:23:14.583 回答
1

来自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>

相关的jQuery：

$("#container2").draggable({
        scroll: false,
        axis: "y",
        handle: "#dragme", // added id
        // this next part I changed to get full up/down scrolling to work
        // You'll have to change this to get the functionality you want
        drag: function(event, ui) {
            if(ui.position.top <= y1 - y2)
            {
                ui.position.top = y1 - y2;
            }

        }
    });

以及额外的 CSS（与其他容器一样，但溢出设置为新的）：

.containerNew {
    overflow: visible; position: relative; width: 650px; height: 150px; border: 1px solid #888;}
}

免责声明：我是 jQuery 的新手。如果我的解释的任何部分看起来不正确，请告诉我！

于 2013-10-30T08:23:33.177 回答