本文整理匯總了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
}