本文整理汇总了TypeScript中@interactjs/core/scope.Scope.usePlugin方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Scope.usePlugin方法的具体用法？TypeScript Scope.usePlugin怎么用？TypeScript Scope.usePlugin使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@interactjs/core/scope.Scope的用法示例。
在下文中一共展示了Scope.usePlugin方法的3个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: install
function install (scope: Scope) {
scope.usePlugin(gesture)
scope.usePlugin(resize)
scope.usePlugin(drag)
scope.usePlugin(drop)
}示例2: install
function install (scope: Scope) {
const {
actions,
/** @lends module:interact */
interact,
/** @lends Interactable */
Interactable, // eslint-disable-line no-shadow
interactions,
defaults,
} = scope
scope.usePlugin(drag)
interactions.signals.on('before-action-start', ({ interaction }) => {
if (interaction.prepared.name !== 'drag') { return }
interaction.dropState = {
cur: {
dropzone: null,
element: null,
},
prev: {
dropzone: null,
element: null,
},
rejected: null,
events: null,
activeDrops: null,
}
})
interactions.signals.on('after-action-start', ({ interaction, event, iEvent: dragEvent }) => {
if (interaction.prepared.name !== 'drag') { return }
const { dropState } = interaction
// reset active dropzones
dropState.activeDrops = null
dropState.events = null
dropState.activeDrops = getActiveDrops(scope, interaction.element)
dropState.events = getDropEvents(interaction, event, dragEvent)
if (dropState.events.activate) {
fireActivationEvents(dropState.activeDrops, dropState.events.activate)
}
})
// FIXME proper signal types
interactions.signals.on('action-move', (arg) => onEventCreated(arg as any, scope))
interactions.signals.on('action-end', (arg) => onEventCreated(arg as any, scope))
interactions.signals.on('after-action-move', ({ interaction }) => {
if (interaction.prepared.name !== 'drag') { return }
fireDropEvents(interaction, interaction.dropState.events)
interaction.dropState.events = {}
})
interactions.signals.on('after-action-end', ({ interaction }) => {
if (interaction.prepared.name !== 'drag') { return }
fireDropEvents(interaction, interaction.dropState.events)
})
interactions.signals.on('stop', ({ interaction }) => {
if (interaction.prepared.name !== 'drag') { return }
const { dropState } = interaction
dropState.activeDrops = null
dropState.events = null
dropState.cur.dropzone = null
dropState.cur.element = null
dropState.prev.dropzone = null
dropState.prev.element = null
dropState.rejected = false
})
/**
*
* ```js
* interact('.drop').dropzone({
* accept: '.can-drop' || document.getElementById('single-drop'),
* overlap: 'pointer' || 'center' || zeroToOne
* }
* ```
*
* Returns or sets whether draggables can be dropped onto this target to
* trigger drop events
*
* Dropzones can receive the following events:
* - `dropactivate` and `dropdeactivate` when an acceptable drag starts and ends
* - `dragenter` and `dragleave` when a draggable enters and leaves the dropzone
* - `dragmove` when a draggable that has entered the dropzone is moved
* - `drop` when a draggable is dropped into this dropzone
*
* Use the `accept` option to allow only elements that match the given CSS
* selector or element. The value can be:
*
* - **an Element** - only that element can be dropped into this dropzone.
//.........这里部分代码省略.........
示例3: use
function use (plugin: Interact.Plugin, options?: { [key: string]: any }) {
scope.usePlugin(plugin, options)
return interact
}