Question

我想在div父母中心找到一个可拖动的div。见这里的例子

$("#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>

现在，它运行正常，但只要我想将mover放在joystick的中心，拖动就不会按照我想要的方式运行。

我尝试定位它给mover一个margin: 45px 0 0 45px;，但随后（因为盒子模型看到边距作为框的一部分）拖动仍然只能正常工作，并且没有起来离开。

如你所见，我想创造一种用于操纵某物的“操纵杆”。因此，它需要居中但也可以在所有轴上移动。

任何想法都将受到高度赞赏。

Answer 1

这是一个完整的工作演示，您必须使用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("&nbsp;");
    }
});

Answer 2

添加以下CSS：

#joystick {position:relative}
#mover {position:absolute;top:45px;left:45px}

工作示例：http://jsfiddle.net/52V6h/

这和margin之间的区别在于它只是设置位置，同时保持容器相同。更改边距将迫使#mover始终与框角相距45px。

在父母的中心定位一个可拖动的

2 个答案: