javascript - 仅在父元素内拖动指令？

Question

我想基本上限制 angular.js 的以下实现 drag directive进入父元素的边界。我该怎么做？

这是一个可视化我的问题的 jsbin:http://jsbin.com/maxife/3/edit?html,css,js,output

Answer 1

您必须修改拖动指令才能实现此目的，
由于 event.pageX 和 event.pageY 属性返回鼠标指针相对于整个 document 左边缘的位置，您需要:

• 将这些属性更改为相对于父元素
看看它是如何在这里完成的: jQuery get mouse position within an element
我们的 event.offsetX 和 event.offsetY 将为我们提供鼠标在 span 元素内单击的位置:

<span my-draggable>Drag Me</span>

这不是我们想要的，您必须获取父元素的高度和宽度属性，在获取它们之后 - 然后使用 offsetX/offsetY 在父 div block 内进行正确定位。

如何将其放入指令中？使用这个: Get element parent height inside directive in AnguarJS

另一种选择是我们将限制 mousemove 函数中的 x,y 变量

这样您将只能将它移动到父元素内，防止使用 CSS 将位置保存在元素外部。

同样，您将不得不使用父元素的高度和宽度属性，但您不必触摸位置或使用偏移量，只需在 element.css({..}):

      if(x>27){
       x=27;
       }
      else if(x<0){
        x=0;
      }
      if(y>77){
        y=77;
      }
      else if(y<0){
        y=0;
      }

我已经手动完成了，所以你可以在使用父属性之前有一个例子。当然，如果您不希望某些 span 元素超出 div，则必须考虑 span width+height。


完整模块:

angular.module('dragModule', [])
.directive('myDraggable', ['$document', function($document) {
return {
  link: function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;

    element.css({
     position: 'absolute',
     border: '1px solid red',
     backgroundColor: 'lightgrey',
     cursor: 'pointer'
    });

    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;
      if(x>27){
         x=27;
       }
      else if(x<0){
        x=0;
      }
      if(y>77){
        y=77;
      }
      else if(y<0){
        y=0;
      }
      element.css({
        top: y + 'px',
        left:  x + 'px'
      });
    }

    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  }
};
}]);

在 JSbin 中:JSbin link