Question

I want to position a draggable div within the divs parents center. See example here

$("#mover").draggable({
    revert: true,
    containment: "parent"
});

<div style="width: 100px; height: 100px;" id="joystick">
    <div style="width: 10px; height: 10px" id="mover"></div><br />
</div>

Now, it works fine, but as soon as I want to position the mover at the joysticks center, the dragging doesn’t work the way I want it to.

I tried positioning it giving the mover a margin: 45px 0 0 45px;, but then (because of the box-model seeing the margin as a part of the box) the dragging still only works down and right, and not up and left.

As you see, I want to create kind of a “joystick” used to steer something. Therefore, it needs to be centered but also be movable in all axis’.

Any ideas would be highly appreciated.

Answer 1

Here’s a full working demo, you have to position the center of the joystick with position:relative;: http://jsfiddle.net/E6BQe/

HTML:

<div id="coords">&nbsp;</div>
<div id="joystick">
    <div id="mover"></div>
</div>

CSS:

#joystick { background-color:whitesmoke; width: 100px; height: 100px; padding:0px; }
#mover { background-color:red; position:relative; margin:0px; padding:0px; width: 10px; height: 10px; left:45px; top:45px; }

javascript:

$("#mover").draggable({
    revert: true,
    containment: "parent",
    create: function(){
        $(this).data("startLeft",parseInt($(this).css("left")));
        $(this).data("startTop",parseInt($(this).css("top")));
    },
    drag: function(event,ui){
        var rel_left = ui.position.left - parseInt($(this).data("startLeft"));
        var rel_top = ui.position.top - parseInt($(this).data("startTop"));
        $('#coords').text(rel_left + ", " + rel_top);
    },
    stop: function(){
        $('#coords').html(" ");
    }
});