Take the 2-minute tour ×

how can I have a draggable image using a handler? I've read that handlers should be inside the draggable, but I can't really have another element inside an image.

I've got here a fiddle for better presentation:


Question is how should I be able to drag inside the #viewport and still move the #image?


I think the question was a little vague:

Cause right now (on the fiddle) when you click on the #image first and drag, it drags the #image. But when you click on the #viewport first, it doesn't. That's what I want to happen, when you click on the #viewport first and drag, it would still drag the #image.

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted

It seems jquery draggable requires the handlers are put inside the draggable. You can write your own draggable with just few lines of code. See my demo here


<div id="container">
    <img id="image" src="http://thechive.files.wordpress.com/2011/03/hot-sexy-redheads-12.jpg" />
    <div id="viewport"></div>


    var isDragging, 
        top = 0, left = 0,
        curX, curY;

    $("#image").mousedown(function (e) {

    $("#container").mousedown(function (e) {
        isDragging = true;

        curX = e.pageX;
        curY = e.pageY;

        left = Number($("#image").css("margin-left").
                      toString().replace("px", ""));
        top = Number($("#image").css("margin-top").

    $(document).mouseup(function () {
        if (isDragging){
            // reset
            isDragging = false;
            top = 0;
            left = 0;

        if (!isDragging) {

        left += e.pageX - curX;
        top += e.pageY - curY;

        // set the position
        $("#image").css("margin-left", left + "px").
            css("margin-top", top + "px");

        curX = e.pageX;
        curY = e.pageY;  
share|improve this answer
Yup! It really seems that way. And I guess there's no option for that right now. Thanks for this approach, this will work but I'm using jrac for other stuff as well like coords, I guess I could still get it by changing and catching the movements but I'll continue using jrac for now and just put the #viewport below and just make do with a few boxes. But thanks for this! –  index Feb 18 '13 at 6:16
add comment

Updated your fiddle. Please read the documentation from here: http://api.jqueryui.com/draggable/#option-containment

You had to use the containment option in your .draggable method and you also need to put your image inside the #viewport in order to have it initially inside the #viewport. You can also keep it outside the #viewport and once you drag it inside the #viewport it wont let you drag it again outside.

share|improve this answer
Thanks for the answer, but that's not what I need. I needed to be able to position a certain part of the image in the #viewport. But I want it to be able to drag even in the #viewport box. –  index Feb 15 '13 at 4:33
sorry i did'nt got that. Do you want to drag the image outside the viewport as well? I am really unable to understand what you are trying to achieve. –  I_Debug_Everything Feb 15 '13 at 8:06
Well, the thing I want to achieve is the same as how the fiddle I posted works, 'cept I want the #viewport to also move the image. Hope that clears it. –  index Feb 15 '13 at 8:31
add comment

considering your description how should I be able to drag inside the #viewport and still move the #image -- did that using simple z-index css style. Hope it helps this time. Fiddle

share|improve this answer
Hi. Sorry if my question is a little vague. What I am trying to do is when I click first inside the #viewport and start dragging it should still move the #image. –  index Feb 18 '13 at 2:30
add comment

Your Answer


