scope.autoStart.signals.on('before-start',  ({ interaction, eventTarget, dx, dy }) => {
    if (interaction.prepared.name !== 'drag') { return }

    // check if a drag is in the correct axis
    const absX = Math.abs(dx)
    const absY = Math.abs(dy)
    const targetOptions = interaction.interactable.options.drag
    const startAxis = targetOptions.startAxis
    const currentAxis = (absX > absY ? 'x' : absX < absY ? 'y' : 'xy')

    interaction.prepared.axis = targetOptions.lockAxis === 'start'
      ? currentAxis[0]  as 'x' | 'y' // always lock to one axis even if currentAxis === 'xy'
      : targetOptions.lockAxis

    // if the movement isn't in the startAxis of the interactable
    if (currentAxis !== 'xy' && startAxis !== 'xy' && startAxis !== currentAxis) {
      // cancel the prepared action
      interaction.prepared.name = null

      // then try to get a drag from another ineractable
      let element = eventTarget

      const getDraggable = function (interactable) {
        if (interactable === interaction.interactable) { return }

        const options = interaction.interactable.options.drag

        if (!options.manualStart &&
            interactable.testIgnoreAllow(options, element, eventTarget)) {
          const action = interactable.getAction(
            interaction.downPointer, interaction.downEvent, interaction, element)

          if (action &&
              action.name === ActionName.Drag &&
              checkStartAxis(currentAxis, interactable) &&
              autoStart.validateAction(action, interactable, element, eventTarget, scope)) {
            return interactable
          }
        }
      }

      // check all interactables
      while (is.element(element)) {
        const interactable = scope.interactables.forEachMatch(element, getDraggable)

        if (interactable) {
          interaction.prepared.name = ActionName.Drag
          interaction.interactable = interactable
          interaction.element = element
          break
        }

        element = parentNode(element)
      }
    }
  })

function parentHasStyle (element: Element, prop: keyof CSSStyleDeclaration, styleRe: RegExp) {
  let parent = element as HTMLElement

  while (is.element(parent)) {
    if (hasStyle(parent, prop, styleRe)) {
      return true
    }

    parent = parentNode(parent)
  }

  return false
}

    scope.interactables.forEachMatch(element, (interactable: Interactable) => {
      const eventable = interactable.events
      const options = eventable.options

      if (
        eventable.types[type] &&
        eventable.types[type].length &&
        is.element(element) &&
        interactable.testIgnoreAllow(options, element, eventTarget)) {
        targets.push({
          element,
          eventable,
          props: { interactable },
        })
      }
    })

function checkAndPreventDefault (interactable, scope, event) {
  const setting = interactable.options.preventDefault

  if (setting === 'never') { return }

  if (setting === 'always') {
    event.preventDefault()
    return
  }

  // setting === 'auto'

  // if the browser supports passive event listeners and isn't running on iOS,
  // don't preventDefault of touch{start,move} events. CSS touch-action and
  // user-select should be used instead of calling event.preventDefault().
  if (events.supportsPassive && /^touch(start|move)$/.test(event.type)) {
    const doc = getWindow(event.target).document
    const docOptions = scope.getDocOptions(doc)

    if (!(docOptions && docOptions.events) || docOptions.events.passive !== false) {
      return
    }
  }

  // don't preventDefault of pointerdown events
  if (/^(mouse|pointer|touch)*(down|start)/i.test(event.type)) {
    return
  }

  // don't preventDefault on editable elements
  if (is.element(event.target) &&
      matchesSelector(event.target, 'input,select,textarea,[contenteditable=true],[contenteditable=true] *')) {
    return
  }

  event.preventDefault()
}