离子滚动内的离子，可拖动项目

Question

在我的 ionic 项目中，我在 ionic-scroll 指令中放置了一些覆盖图像的图标。使用 x,y 坐标并将图标位置设置为绝对位置（相对于离子滚动）。放置图标效果很好。

现在我希望能够在离子卷轴内拖动这些图标。

我使用 on-touch 和 on-release 来冻结滚动，并使用 on-drag 来获取拖动事件。

现在我遇到的问题是，拖动方法中的 $event 仅提供与 window / 文档相关的 x / y 坐标。

我似乎无法找到一种方法来获得相对于父级（离子滚动）的正确 x、y 坐标：

HTML 看起来像这样：

<ion-scroll zooming="true" direction="xy">
    <img >
    <my-icon 
      on-touch="vm.stopIonicScroll()" 
      on-release="vm.startIonicScroll()" 
      on-drag="vm.dragging($event, vm.start)">
    </my-icont>
</ion-scroll>

还有我的控制器

vm.stopIonicScroll = function() {
    $ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingY = false;
    $ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingX = false;
};

vm.startIonicScroll = function() {
    $ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingY = true;
    $ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingX = true;
};

vm.dragging = function($event, element) {
    console.log($event);
};

一旦我开始拖动元素，我就正确地获得了事件调用：

例如这样的和 $event:

{
  "gesture": {
    "center": {
      "pageX": 609,
      "pageY": 363
    },
    "timeStamp": 1438260728495,
    "target": {

    },
    "touches": {
      "0": {
        "target": {

        },
        "identifier": 3284571703,
        "clientX": 609,
        "clientY": 363,
        "pageX": 609,
        "pageY": 363,
        "screenX": 609,
        "screenY": 363
      },
      "length": 1
    },
    "eventType": "move",
    "pointerType": "touch",
    "srcEvent": {
      "touches": {
        "0": {
          "target": {

          },
          "identifier": 3284571703,
          "clientX": 609,
          "clientY": 363,
          "pageX": 609,
          "pageY": 363,
          "screenX": 609,
          "screenY": 363
        },
        "length": 1
      },
      "targetTouches": {
        "0": {
          "target": {

          },
          "identifier": 3284571703,
          "clientX": 609,
          "clientY": 363,
          "pageX": 609,
          "pageY": 363,
          "screenX": 609,
          "screenY": 363
        },
        "length": 1
      },
      "changedTouches": {
        "0": {
          "target": {

          },
          "identifier": 3284571703,
          "clientX": 609,
          "clientY": 363,
          "pageX": 609,
          "pageY": 363,
          "screenX": 609,
          "screenY": 363
        },
        "length": 1
      },
      "scale": 1,
      "rotation": 0,
      "ctrlKey": false,
      "shiftKey": false,
      "altKey": false,
      "metaKey": false
    },
    "deltaTime": 19992,
    "deltaX": 252.05572809,
    "deltaY": 139.527864045,
    "velocityX": 0.012607829536315,
    "velocityY": 0.0069791848762005,
    "distance": 288.09740524333,
    "angle": 28.967141193712,
    "direction": "right",
    "scale": 1,
    "rotation": 0,
    "startEvent": {
      "center": {
        "pageX": 356.94427191,
        "pageY": 223.472135955
      },
      "timeStamp": 1438260708503,
      "target": {

      },
      "touches": [
        {
          "target": {

          },
          "identifier": 3284571702,
          "clientX": 348,
          "clientY": 219,
          "pageX": 348,
          "pageY": 219,
          "screenX": 348,
          "screenY": 219
        }
      ],
      "eventType": "start",
      "pointerType": "touch",
      "srcEvent": {
        "touches": {
          "0": {
            "target": {

            },
            "identifier": 3284571702,
            "clientX": 1022,
            "clientY": 710,
            "pageX": 1022,
            "pageY": 710,
            "screenX": 1022,
            "screenY": 710
          },
          "length": 1
        },
        "targetTouches": {
          "0": {
            "target": {

            },
            "identifier": 3284571702,
            "clientX": 1022,
            "clientY": 710,
            "pageX": 1022,
            "pageY": 710,
            "screenX": 1022,
            "screenY": 710
          },
          "length": 1
        },
        "changedTouches": {
          "0": {
            "target": {

            },
            "identifier": 3284571702,
            "clientX": 1022,
            "clientY": 710,
            "pageX": 1022,
            "pageY": 710,
            "screenX": 1022,
            "screenY": 710
          },
          "length": 1
        },
        "scale": 1,
        "rotation": 0,
        "ctrlKey": false,
        "shiftKey": false,
        "altKey": false,
        "metaKey": false,
        "isTapHandled": true
      }
    }
  }
}

现在我在这个事件中得到的每个 x/y 都是相对于 window/ 文档的。

使用 ng-click 你可以获得 offsetX / offsetY（相对于父级）。

我如何使用 on-drag 来管理它？

Answer 1

经过短暂的休息后我找到了解决方案：

如果以后有人遇到这个问题，这是我的解决方案：

var zoom, currentpos;
vm.stopIonicScroll = function(el) {
    currentpos = {
        x: el.x,
        y: el.y
    };
    zoom = $ionicScrollDelegate.$getByHandle('plan').getScrollView().__zoomLevel;
    $ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingY = false;
    $ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingX = false;
};

vm.startIonicScroll = function() {
    $ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingY = true;
    $ionicScrollDelegate.$getByHandle('plan').getScrollView().options.scrollingX = true;
};

vm.dragging = function($event, element) {
    element.x = currentpos.x + Math.round($event.gesture.deltaX / zoom);
    element.y = currentpos.y + Math.round($event.gesture.deltaY / zoom);
};

澄清一下：

第一次触摸 (stopIonicScroll) 时，我将元素的当前位置和离子滚动的当前缩放级别放入变量中。

当我拖动元素时，我使用手势 deltaX/Y.

这个deltaX/Y是从拖动事件开始计算的（这就是我们需要保持初始位置的原因）。

需要缩放级别来调整 'speed' 移动。

Answer 2

我只想添加一种更简洁的方法来防止滚动窗格滚动：

$ionicScrollDelegate.$getByHandle('plan').freezeScroll(boolean: shouldFreeze)

我遇到了同样的问题两天了，只是不明白为什么拖动不起作用。你帮了我很多。我忘记了缩放因子 :) 不使用 Math.round 可以提高准确性，并且在我的例子中可以使操作更加安全。

离子滚动内的离子，可拖动项目

Ionic, draggable item inside ion-scroll

events

drag

angularjs

ionic