AngularJS Ngdraggable issue

私がサポートしているプロジェクトのためにドラッグ可能なdiv要素を作成しています。要素をドラッグできるようにするこのAngularJS directiveが見つかりました。AngularJS Ngdraggable issue

指示を変更して開始位置を変更しましたが、変更を加えたときにマウスの方向が反転しません（つまり、マウスを右側に移動すると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 
    }; 
});

出典

2017-03-24 Herr Josua

あなたのディレクティブには何が問題なのかよく分かりませんが、ドラッグが機能した後では要素のCSSに負の値を指定しています。

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

チェックcodepen。私も、私がすることを試みたが、完全に消えるのdivで問題が発生したが、その後、私はなぜ実現

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>

出典

2017-03-24 13:32:16 nashcheez

：

はコードを参照してください。単に-xを行うのではなく、それを " - " + xにしていました。 –

それは文字列になります。ここで変数のIntegerコンテキストを保持しなければなりません。 – nashcheez

答えて

関連する問題