CODEWITHSUNDEEP
jqueryjquery-ui
Michel
Michel

Reputation: 181

Drag image with button as image's handle

I have an image which has a yellow button. I want to use the yellow button as a handle so that when I drag the yellow div up and down, the image will follow and also move up and down. My image is constrained to y-axis so likewise the button must be constrained to y-axis on drag.

Here is a fiddle: http://jsfiddle.net/michelm/9Vwzp/

and the jQuery code:

$(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) {
            //####
        }
    });                    
});

Upvotes: 2

Views: 970

Answers (2)

Overflow Stack
Overflow Stack

Reputation: 833

Here is a >>>JSFiddle<<< solution for the functionality you were looking for.

Here is the code:

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()}
});

Upvotes: 1

Nondeterministic narwhal
Nondeterministic narwhal

Reputation: 480

From the jQuery API on Draggable:

If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). Only elements that descend from the draggable element are permitted.

So my guess was your button wasn't a descendant of the image element. I did my best to fix the error - though it's not perfect, I hope it gives you a good starting point. I got the handle working by enclosing both the button and image in a second container (inside your existing one), assigned id's to the tags to make the functionality clearer, and added a few things to the HTML/CSS. The full changes are here: http://jsfiddle.net/beMaG/1/

The key areas are:

The 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>

The relevant 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;
            }

        }
    });

And the extra CSS (like the other container, but with overflow set to new):

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

Disclaimer: I am a novice to jQuery. If any part of my explanation doesn't look right please let me know!

Upvotes: 1

Related Questions