Question

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

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

我想让白色方块出现在中心位置。

我尝试在下面更改代码（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;

然而，它没有用。什么是正确的代码，让白色方块出现在中心？

Answer 1

如果您想要做的就是让白色方块在某个位置开始，那么在样式表中给它一个位置。

left: 130px;
top: 130px;

更新了小提琴：http://jsfiddle.net/MrLister/3kwwo53t/6/

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

顺便说一句，它是130px，而不是150.由于外部div为300px，内部正方形为40px，因此其偏移距离中心为-20px。

编辑：或者，如果您想独立于容器的大小，请将容器的position设置为relative并计算如下位置：

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

较新的小提琴：http://jsfiddle.net/MrLister/3kwwo53t/7/

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

Answer 2

试试这个，如果你不想硬编码像素，

#container {
   width : 300px;
   height: 300px;
   background-color: black;
   display:table-cell;    
   vertical-align:middle;
   text-align:center;
}

.shape {
    width : 40px;
    height: 40px;
    background-color: white;
    margin-left:auto;
    margin-right:auto;
}

试试此链接 - https://jsfiddle.net/3kwwo53t/8/

Answer 3

设置完所有内容后，在链接功能中调用setPosition()：

.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;

      var width  = elem[0].offsetWidth,
          height = elem[0].offsetHeight;

      // Obtain drag options
      if (scope.dragOptions) {
        start  = scope.dragOptions.start;
        drag   = scope.dragOptions.drag;
        stop   = scope.dragOptions.stop;
        var id = scope.dragOptions.container;
        if (id) {
            container = document.getElementById(id).getBoundingClientRect();
        }
      }

      // Bind mousedown event
      elem.on('mousedown', function(e) {
        e.preventDefault();
        startX = e.clientX - elem[0].offsetLeft;
        startY = e.clientY - elem[0].offsetTop;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
        if (start) start(e);
      });

      # The position of the element is not changed until the `setPosition` function 
      # is called
      setPosition()

      // Handle drag event
      function mousemove(e) {
        y = e.clientY - startY;
        x = e.clientX - startX;
        setPosition();
        if (drag) drag(e);
      }

      // Unbind drag events
      function mouseup(e) {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
        if (stop) stop(e);
      }

      // Move element, within container if provided
      function setPosition() {
        if (container) {
          if (x < container.left) {
            x = container.left;
          } else if (x > container.right - width) {
            x = container.right - width;
          }
          if (y < container.top) {
            y = container.top;
          } else if (y > container.bottom - height) {
            y = container.bottom - height;
          }
        }

        elem.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }
    }
  }

})

Answer 4

使用绝对定位时，您可以使用top: 50%; left: 50%;将元素居中，然后将元素移回其宽度的一半：

这样，父容器的大小都不重要 - .shape将始终居中。

.shape {
    position: absolute;
    width : 40px;
    height: 40px;

    top: 50%;
    margin-top: -20px;

    left: 50%;
    margin-left: -20px;

    background-color: white;
}

http://jsfiddle.net/3kwwo53t/5/

如何使这个白色方块默认显示在中心而不是顶部左上角？

4 个答案: