个人中心
gpt4 book ai didi

javascript - AngularJS Ngdraggable 问题

转载 作者：太空宇宙 更新时间：2023-11-04 08:57:41 26 4
gpt4 key购买 nike

我正在为我支持的元素制作一个可拖动的 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
  };
});

最佳答案

我不确定你的指令有什么问题，但是在拖动后为你的元素的 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>

关于javascript - AngularJS Ngdraggable 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43000726/

26 4 0
文章推荐： c++ - 使用 strtok() 和 stringstream 的问题
文章推荐： javascript - 多个内容可编辑的 div : on Enter jumping downward and on Backspace- upward - Chrome
文章推荐： html - 空格之间的空格在 iOS 上不起作用
文章推荐： Java - 使用 FileOutputStream append 到 Excel 文件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com