如何在ionic v1中实现可拖动元素

Question

大家好我的要求是使元素可在屏幕上拖动并将元素的位置设置为用户停止拖动的位置。到目前为止，我能够使一个元素可在屏幕上拖动，但一旦释放它就会回到它的旧位置（它之前的位置）我正在使用 angular 的 ngDraggable 指令。抱歉，我是 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 并使用左侧，因为 x 表示从左侧而不是右侧的位置。

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

希望对您有所帮助

如何在ionic v1中实现可拖动元素

how to implement Draggable element in ionic v1

angularjs

hybrid-mobile-app

ionic-framework