如何在 ionic v1 中实现 Draggable 元素

Question

嗨，伙计们，我的要求是使元素可在屏幕上拖动，并将元素的位置设置为用户停止拖动的位置。到目前为止，我能够使一个元素在屏幕上可拖动，但一旦释放它就会回到它的旧位置（它之前的位置）我正在使用 ngDraggable angular 指令。抱歉，我是 Ionic 和 Angular 的新手。任何帮助将不胜感激。 我的代码如下

<div ng-drag="true" id="draggableAxis" ng-style="{{draggedStyle}}" ng-drag-success="onDragComplete($data,$event)">
            <img src="img/axis.png" >
            <img ng-src="img/other.png" style="width:75px"> 
        </div> 

在我的控制器中：

$scope.draggedStyle = {top: '96px',
    right: '90px'};
    var onDraggableEvent = function(evt, data) {           
      if(evt.name=='draggable:start'){
        console.log('draggable-start');
        console.log(data.x);
        console.log(data.y);
      }else{
        console.log('draggable-end');
        console.log(data);
        console.log(data.element.centerX +'  '+data.element.centerY);
        console.log(evt);
        $scope.setPosition(data);
        
    } 
}
    $scope.onDragComplete=function(data,evt){
       console.log("drag success, data:", data);
       console.log(evt);
    }// this fn doesnot gets triggered
    $scope.$on('draggable:start', onDraggableEvent);    
    $scope.$on('draggable:end', onDraggableEvent);
     
    $scope.setPosition=function(data){
        $scope.draggedStyle = {
            top: data.x+'px',
            right:  data.y+'px'
        };
     }

SCREEN SHOT OF MOBILE VIEW

Answer 1

我将修复更新为https://plnkr.co/edit/fVaIUVvAd7jLETkwVepm?p=preview

其中一个问题是

ng-style="{{draggedStyle}}" 

应该是

ng-style="draggedStyle" 

另外，我将 setPosition 方法切换为翻转 x 和 y 并使用 left，因为 x 表示从左侧而不是右侧的位置。

$scope.setPosition = function(data) {
    $scope.draggedStyle = {
      top: data.y + 'px',
      left: data.x + 'px'
    };
  }

希望有帮助