interact(target).resizable({ preserveAspectRatio: true });
See PR #260.
interact.margin(number)
- Use interact(target).resizable({ margin: number });
insteadFull list of changes on Github
event
as the first argument to actionCheckers. See commit 88dc583dragEvent
as the first parameter to drop.checker functions. See
commits 16d74d4 and d0c4b69interactable.accept - instead, use:
interact(target).dropzone({ accept: stringOrElement })
interactable.dropChecker - instead, use:
interact(target).dropzone({ checker: function () {} })
See https://github.com/taye/interact.js/issues/166#issuecomment-91234390
accept: 'pointer'
in scrolled pages on iOS6 and lower - see
commit 0b94aacWith the new resize edges API, you can resize from the top and left edges of an element in addition to the bottom and right. It also allows you to specify CSS selectors, regions or elements as the resize handles.
dropChecker
argumentsThe arguments to dropChecker
functions have been expanded to include the
value of the default drop check and some other useful objects. See PR
161
preventDefault('auto')
If manuanStart is true
, default prevention will happen only while
interacting. Related to Issue
138.
This removes a small inaccuracy when snapping with one or more
relativeOffsets
.
Basic support for ShadowDOM was implemented in PR 143
Fixed Interactable#on({ type: listener }). b8a5e89
Added a double
property to tap events. tap.double === true
if the tap will
be followed by a doubletap
event. See issue
155.
Fixed issue 150.
See issue 149.
Gestures were completely broken in v1.2.0. They're fixed now.
Fixed restriction to an element when the element doesn't have a rect (display:
none
, not in DOM, etc.). Issue
144.
Multiple interactions have been enabled by default. For example:
interact('.drag-element').draggable({
enabled: true,
// max : Infinity, // default
// maxPerElement: 1, // default
});
will allow multiple .drag-element
to be dragged simultaneously without having
to explicitly set max: integerGreaterThan1
. The default
maxPerElement
value is still 1 so only one drag would be able to happen on
each .drag-element
unless the maxPerElement
is changed.
If you don't want multiple interactions, call interact.maxInteractions(1)
.
Snap modes have been
unified. A targets
array
now holds all the snap objects and functions for snapping.
interact.createSnapGrid(gridObject)
returns a function that snaps to the
dimensions of the given grid.
relativePoints
and origin
interact(target).draggable({
snap: {
targets: [ {x: 300, y: 300} ],
relativePoints: [
{ x: 0, y: 0 }, // snap relative to the top left of the element
{ x: 1, y: 1 }, // and also to the bottom right
],
// offset the snap target coordinates
// can be an object with x/y or 'startCoords'
offset: { x: 50, y: 50 }
}
});
The current Interaction
is now passed as the third parameter to snap functions.
interact(target).draggable({
snap: {
targets: [ function (x, y, interaction) {
if (!interaction.dropTarget) {
return { x: 0, y: 0 };
}
} ]
});
The snap.relativePoints
array succeeds the snap.elementOriign object. But
backwards compatibility with elementOrigin
and the old snapping interface is
maintained.
snap.offset
lets you offset all snap target coords.
See this PR for more info.
Snapping now occurs if the distance to the snap target is less than or equal to the target's range.
inertia.zeroResumeDelta
is now true
by default.
Snap, restrict, inertia, autoScroll can be different for drag, restrict and gesture. See PR 115.
Methods for these settings on the interact
object (interact.snap()
,
interact.autoScroll()
, etc.) have been removed.
function logEventType (event) {
console.log(event.type, event.target);
}
interact(target).on('down tap dragstart gestureend', logEventType);
interact(target).on(['move', 'resizestart'], logEventType);
interact(target).on({
dragmove: logEvent,
keydown : logEvent
});
The expected return value from an action checker has changed from a string to
an object. The object should have a name
and can also have an axis
property. For example, to resize horizontally:
interact(target).resizeable(true)
.actionChecker(function (pointer, defaultAction, interactable, element) {
return {
name: 'resize',
axis: 'x',
};
});
All drop-related events are now plain
objects. The related drag
events are referenced in their dragEvent
property.
The method takes one of the above string values. It will still accept
true
/false
parameters which are changed to 'always'
/'never'
.
Adding a function as a listener for an InteractEvent or pointerEvent type multiple times will cause that function to be fired multiple times for the event. Previously, adding the event type + function combination again had no effect.
Added new event types down, move, up, cancel, hold.
Tap and doubletap with multiple pointers was improved.
Added a workaround for IE8's unusual dblclick event sequence so that doubletap events are fired.
Fixed a tapping issue on Windows Phone/RT.
Fixed a bug that caused the origins of all elements with tap listeners to be subtracted successively as a tap event propagated.
Fixed delegated events when different contexts have been used.
Added basic support for sharing one instance of interact.js between multiplie windows/frames. There are still some issues.