title: Ionic, draggable item inside ion-scroll
body: <p>In my ionic project, I put some icons overlaying an image inside a ionic-scroll directive.
  Using x,y coordinates and putting the icons position to absolute (relative to the ionic scroll). Placing the icons works great.</p>
  
  <p>Now I would like to be able to drag those icons around inside the ionic scroll.</p>
  
  <p>I use on-touch and on-release to freeze the scroll and on-drag to get the drag event.</p>
  
  <p>Now the problem I have is that the $event from the on-drag method only gives me x / y coordinates in relation to the window / document. </p>
  
  <p>I can't seem to figure out a way to get the correct x,y coordinates relative to the parent (ionic-scroll):</p>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;ion-scroll zooming="true" direction="xy"&gt;
      &lt;img &gt;
      &lt;my-icon 
        on-touch="vm.stopIonicScroll()" 
        on-release="vm.startIonicScroll()" 
        on-drag="vm.dragging($event, vm.start)"&gt;
      &lt;/my-icont&gt;
  &lt;/ion-scroll&gt;
  </code></pre>
  
  <p>And my controller</p>
  
  <pre><code>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);
  };
  </code></pre>
  
  <p>Once I start dragging the element I get the event call correctly:</p>
  
  <p>e.g. of such and $event:</p>
  
  <pre><code>{
    "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
        }
      }
    }
  }
  </code></pre>
  
  <p>Now every x / y I get in this event is relative to the window / document.</p>
  
  <p>With ng-click you can get the <code>offsetX / offsetY</code> (relative to parent).</p>
  
  <p><em>How could I manage this with <code>on-drag</code> ?</em></p>