Ионный, перетаскиваемый элемент внутри ионного свитка

В моем ионном проекте я помещал некоторые значки, накладывающиеся на изображение внутри директивы ионного прокрутки. Использование координат x, y и положение значков в абсолютном (относительно ионного прокрутки). Размещение значков отлично работает.Ионный, перетаскиваемый элемент внутри ионного свитка

Теперь я хотел бы иметь возможность перетаскивать эти значки внутри ионного свитка.

Я использую on-touch и on-release, чтобы заморозить прокрутку и перетащить, чтобы получить событие перетаскивания.

Теперь проблема заключается в том, что событие $ из метода on-drag дает мне координаты 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); 
};

После того, как я начала перетаскивания элемента я получить вызов: Событие об ошибке

, например. такого и $ события:

{ 
    "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 
     } 
    } 
    } 
}

Теперь каждый х/у я в этом случае является относительно окна/документа.

С помощью ng-click вы можете получить offsetX/offsetY (относительно родителя).

Как мне это сделать с помощью on-drag?

источник

2015-07-30 RVandersteen

Я нашел решение после короткого перерыва:

В случае, если кто сталкивается с этой проблемой в будущем, вот мое решение:

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.

Этот дельтаX/Y рассчитывается с начала события перетаскивания (поэтому нам нужно сохранить начальную позицию).

Для регулировки 'speed' необходимо увеличить масштаб.

источник

2015-07-30 14:00:02 RVandersteen

Я просто хочу так добавить более чистый способ предотвращения прокрутки-панели для прокрутки:

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

Я имел ту же самую проблему в течение двух дней и просто не понимаю, почему перетаскивание не работает. Вы мне очень помогли. Я забыл о zoomfactor :) Не использовать Math.round повышает точность и, в моем случае, делает операцию более надежной.

источник

2016-08-31 08:53:22

Прошло некоторое время с тех пор, как я написал этот код, но я верю, что у freezeScroll были некоторые ошибки. Это действительно более чистый способ. – RVandersteen

Если я перетаскиваю слишком быстро, мой элемент перетаскивается, потому что он больше не получает событие перетаскивания. Вы знаете какое-либо решение для этого? –

Я этого не делаю, прошло уже больше года с тех пор, как я работал с ионикой. Может быть, ваш элемент слишком мал? – RVandersteen

Ионный, перетаскиваемый элемент внутри ионного свитка

ответ

Смежные вопросы