Question

我有这个jsfiddle，可以用鼠标移动一个正方形。

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

<div ng-app="test" ng-controller="testCtrl">
    <div id="container">
        <div class="shape" ng-draggable='dragOptions'></div>
    </div>
</div>

我想要一些文字说，"Square"出现在白色方块旁边。当这个白色方块移动时，文本"Square"跟随白色方块。这可能吗？如果是的话，怎么办呢？

Answer 1

最简单的方法是使用伪元素：

.shape:before {
   content: "Square";
}

这将在DOM中的.square元素之前插入一些内容（在本例中为字符串“square”）。

Answer 2

你可以通过放置一个绝对定位的span来做这样的事情

angular.module('test', [])

.directive('ngDraggable', function($document) {
  return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    },
    link: function(scope, elem, attr) {
      var startX, startY, x = 0,
        y = 0,
        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);
      });

      // 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'
        });
      }
    }
  }

})

.controller('testCtrl', function($scope) {
  $scope.dragOptions = {
    start: function(e) {
      console.log("STARTING");
    },
    drag: function(e) {
      console.log("DRAGGING");
    },
    stop: function(e) {
      console.log("STOPPING");
    },
    container: 'container'
  }

});

#container {
  width: 300px;
  height: 300px;
  background-color: black;
}
.shape {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
  <div id="container">
    <div class="shape" ng-draggable='dragOptions'><span style="position:relative;left:100%;top:0;color:red">hi</span>
    </div>
  </div>
</div>

Answer 3

您可以使用简单的方法

{
    content: "Square"
}

当文字移动时，如何使文字跟随这个方块？

3 个答案: