javascript - 这个新的重复拖放指令有什么问题？

Question

我有这个 jsfiddle，它使用 angularjs 指令来拖放一个白色方 block 。

Fiddle 1

我添加了另一个绿色方 block 并复制了指令。不能再在第二个 jsfiddle 中拖放方 block 。代码有什么问题？ Fiddle 2

我改变的地方是； 在 HTML 中

<div class="shapeX" ng-draggableX='dragOptions'></div>

在 CSS 中，

.shapeX
{
    position: absolute;
    width : 40px;
    height: 40px;
    background-color: green;
}

在javascript中(只需复制并粘贴原始指令并重命名)，

.directive('ngDraggableX', 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'
        });
      }
    }
  }
})

Answer 1

只需修改以下内容:

<div class="shapeX" ng-draggableX='dragOptions'></div>

到

<div class="shapeX" ng-draggable-x='dragOptions'></div>

和

scope: {
  dragOptions: '=ngDraggable'
},

到

scope: {
  dragOptions: '=ngDraggableX'
},