在家長中心定位可拖動

我想在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

在家長中心定位可拖動

回答

相關問題