Question

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

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

Answer 1

您必须修改拖拽指令才能实现这一点，
由于 event.pageX 和 event.pageY 属性会返回鼠标指针相对于整个文档左边缘的位置，因此您需要：

将这些属性更改为相对于父元素

jQuery get mouse position within an element

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

这不是我们要找的，你必须得到父元素的高度和宽度属性，然后得到它们 - 然后使用offsetX / offsetY在父div块内正确定位。

你如何进入指令？使用此： Get element parent height inside directive in AnguarJS

另一个选择是我们会将 x，y 变量限制在 mousemove 函数

中这样，您只能在父元素内移动它，防止使用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的范围，则必须考虑跨度宽度+高度。

完整的模块：

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

Draging指令只在父元素中？

1 个答案: