javascript - 如何让这个白色方 block 默认出现在中心而不是左上角？

Question

我有这个 jsfiddle，其中白色方 block 总是出现在左上角的顶部。

http://jsfiddle.net/helpme128/3kwwo53t/2/

我想让白色方 block 出现在中心。

我尝试更改下面的代码 (x = 150, y = 150);

.directive('ngDraggable', function($document) {   return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    },
    link: function(scope, elem, attr) {
      var startX, startY, x = 150, y = 150,
          start, stop, drag, container;

然而，它并没有起作用。让白色方 block 出现在中心的正确代码应该是什么？

Answer 1

如果您只想让白色方 block 从某个位置开始，请在样式表中为其指定位置。

left: 130px;
top: 130px;

更新 fiddle :http://jsfiddle.net/MrLister/3kwwo53t/6/

JavaScript 用于拖动，不用于定义初始状态。

顺便说一句，它是 130px，而不是 150。由于外部 div 的宽度为 300px，而内部正方形的尺寸为 40px，因此它的偏移量需要距离中心为 -20px。

编辑:或者，如果你想独立于容器的大小，将容器的 position 设置为 relative 并像这样计算位置:

left: calc(50% - 20px);
top: calc(50% - 20px);

较新的 fiddle :http://jsfiddle.net/MrLister/3kwwo53t/7/

请注意，只有现代浏览器才支持 calc。