angularjs draggable指令在里面顯示值

Question

從指令開發者指南，我試圖扭曲關於draggable指令的一個例子，並使它顯示它的坐標。

但我的代碼更改使指令不可拖動。 最重要的變化是我在指令中添加了范圍，如下所示。 有人可以提供幫助嗎？ 完整的來源可以在下面的鏈接中找到。 謝謝！

https://plnkr.co/edit/muegeHyOWC828IjI84Tt?p=preview

scope:{
    startX: '=', 
    startY: '=', 
    x: '=',
    y: '='
  },

Answer 1

您沒有將控制器變量傳遞給指令：

<span my-draggable  
 startX="startX" startY="startY" 
 x="x" y="y" >
    Drag Me({{x}},{{y}})
</span>

演示Plunker 1

但是如果你想更新計數器，我會綁定方法：

  .directive('myDraggable', ['$document','$timeout', function($document,$timeout) {
    return {
      scope:{
        onChange: '&'
      },

      link: function(scope, element, attr) {

         scope.x=0;
         scope.y=0;
         scope.startX=0;
         scope.startY=0;

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

        element.on('mousedown', function(event) {
          console.log('mousedown');
          // Prevent default dragging of selected content
          event.preventDefault();

          $document.on('mousemove', mousemove);
          $document.on('mouseup', mouseup);
        });



        function mousemove(event) {
            scope.y = event.pageY - scope.startY;
            scope.x = event.pageX - scope.startX;

            element.css({
              top: scope.y + 'px',
              left: scope.x + 'px'
            });  

           $timeout(function(){
            scope.onChange({data:{x:scope.x, y:scope.y}});
           });
        }

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

調節器

 $scope.onChange = function(data){
   $scope.x=data.x;
   $scope.y=data.y;
 }

HTML

  <span my-draggable  on-change="onChange(data)" >Drag Me({{x}},{{y}})</span>

演示Plunker 2

Answer 2

這是您的工作更新代碼

 angular.module('dragModule', []) .controller('myController', ['$scope', function($scope){ $scope.startX=0; $scope.startY=0; $scope.x=0; $scope.y=0; }]) .directive('myDraggable', ['$document', function($document) { return { scope:{ startX: '=', startY: '=', x: '=', y: '=' }, link: function(scope, element, attr) { element.css({ position: 'relative', border: '1px solid red', backgroundColor: 'lightgrey', cursor: 'pointer' }); element.on('mousedown', function(event) { // Prevent default dragging of selected content event.preventDefault(); scope.startX = event.pageX - scope.x; scope.startY = event.pageY - scope.y; $document.on('mousemove', mousemove); $document.on('mouseup', mouseup); scope.$apply(); }); function mousemove(event) { scope.y = event.pageY - scope.startY; scope.x = event.pageX - scope.startX; element.css({ top: scope.y + 'px', left: scope.x + 'px' }); scope.$apply(); } function mouseup() { $document.off('mousemove', mousemove); $document.off('mouseup', mouseup); } } }; }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="dragModule"> <div ng-controller="myController"> <span my-draggable start-x="startX" start-y="startY" x="x" y="y" id="drag">Drag Me({{x}},{{y}})</span> </div> </body>

https://jsfiddle.net/Shubhamtri/w13sfaun/2/

angularjs draggable指令在里面顯示值

問題描述

2 個解決方案

解決方案1
2 2017-09-10 18:07:08

解決方案2
1 已采納 2017-09-10 19:45:13

angularjs draggable指令在里面顯示值

問題描述

2 個解決方案

解決方案1 2 2017-09-10 18:07:08

解決方案2 1 已采納 2017-09-10 19:45:13

解決方案1
2 2017-09-10 18:07:08

解決方案2
1 已采納 2017-09-10 19:45:13