在家长中心定位可拖动

我想在divs父母中心定位可拖动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>

现在，它工作正常，但只要我想在joystick中心到了mover位置，拖动不工作，我希望它的方式。

我试着将其定位为mover a margin: 45px 0 0 45px;，但之后（因为盒子模型将边距看作是盒子的一部分），拖动仍然只能正常工作，而不是向上和向左。

正如你所看到的，我想创建一种用于操纵某物的“操纵杆”。因此，它需要以中心为中心，但也可以在所有轴上移动'。

任何想法将不胜感激。

来源

2011-04-29 Florian Peschka

这里有一个完整的工作演示，你有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;"); 
    } 
});

来源

2011-04-29 10:01:58 DarthJDG

添加以下CSS：

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

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

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

来源

2011-04-29 09:46:34 davin

在家长中心定位可拖动

回答

相关问题