Question

嗨大家我的要求是在屏幕上创建一个可拖动的元素，并将元素的位置设置为用户停止拖动的位置。到目前为止，我能够在屏幕上创建一个可拖动的元素，但一旦释放它就会回到原来的位置（之前的位置）我正在使用角度的ngDraggable指令。对不起，我是Ionic和有角度的新手。任何帮助将受到高度赞赏。我的代码如下

<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

其中一个问题是

link_to

应该是

ng-style="{{draggedStyle}}"

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

ng-style="draggedStyle"

希望有所帮助

如何在离子v1中实现Draggable元素

1 个答案: