AngularJS Ngdraggable 问题答案

【问题标题】：AngularJS Ngdraggable issueAngularJS Ngdraggable 问题
【发布时间】：2017-08-17 11:08:30
【问题描述】：

我正在为我支持的项目制作可拖动的 div 元素。我发现这个AngularJS directive 允许一个元素是可拖动的。

我修改了指令以更改起始位置，但是当我进行更改时，鼠标方向没有反转（即向右移动鼠标，div 向左移动）。这是AngularJS directive 的更新版本，其中包含以下更改以展示我遇到的问题。

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {

});

app.directive('ngDraggable', function($document, $window){
  function makeDraggable(scope, element, attr) {
    var startX = 0;
    var startY = 0;

    var x = 20;
    var y = 20;

    // Start with a random pos
    // var x = Math.floor((Math.random() * 500) + 40);
    // var y = Math.floor((Math.random() * 360) + 40);

    element.css({
      position: 'absolute',
      cursor: 'pointer',
      bottom: y + 'px',
      right: x + 'px'
    });

    element.on('mousedown', function(event) {
      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;

      element.css({
        bottom: y + 'px',
        right: x + 'px'
      });
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  }
  return {
    link: makeDraggable
  };
});

【问题讨论】：

标签： javascript css angularjs ngdraggable

【解决方案1】：

我不确定您的指令有什么问题，但是在拖动后为元素的 css 提供负值确实有效。

element.css({
  bottom: -y + 'px',
  right: -x + 'px'
});

检查codepen。

参考代码：

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {

});

app.directive('ngDraggable', function($document, $window) {
  function makeDraggable(scope, element, attr) {
    var startX = 0;
    var startY = 0;

    var x = 20;
    var y = 20;

    // Start with a random pos
    // var x = Math.floor((Math.random() * 500) + 40);
    // var y = Math.floor((Math.random() * 360) + 40);

    element.css({
      position: 'absolute',
      cursor: 'pointer',
      bottom: y + 'px',
      right: x + 'px'
    });

    element.on('mousedown', function(event) {
      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;

      element.css({
        bottom: -y + 'px',
        right: -x + 'px'
      });
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  }
  return {
    link: makeDraggable
  };
});

img {
  height: 100px;
}

span {
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  font: 20px/28px Georgia, serif;
  padding: 5px;
}

<html ng-app='myApp'>

<head>
  <title>ng-draggable</title>
  <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
</head>

<body>
  <div ng-controller="myController">
    <h2>Dragging directive fun</h2>

    <img ng-draggable src="http://fc00.deviantart.net/fs70/i/2012/135/a/7/tux_button_by_blacklite_teh_haxxor-d4zv3fv.png" />
  </div>
</body>

</html>

【讨论】：

我虽然尝试过，但遇到了 div 完全消失的问题，但后来我意识到了原因。而不是仅仅做一个 -x 我把它变成了一个“-” + x
这将使它成为一个字符串。我们必须在这里保留变量的 Integer 上下文。