How to use the interactjs.createSnapGrid function in interactjs
To help you get started, we’ve selected a few interactjs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ging / ediphy / _editor / components / canvas / editor_box / EditorBox.jsx View on Github 
componentDidMount() {
let toolbar = this.props.pluginToolbars[this.props.id];
let apiPlugin = Ediphy.Plugins.get(toolbar.pluginId);
let config = apiPlugin.getConfig();
let box = this.props.boxes[this.props.id];
let container = box.container;
let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
let leftO = offsetEl.left || 0;
let topO = offsetEl.top || 0;
offsetEl;
let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });
let targets = this.props.grid ? [gridTarget] : [];
let dragTargets = this.props.grid ? [dragTarget] : [];
Ediphy.Plugins.get(config.name).getConfig();
Ediphy.Plugins.get(config.name).afterRender(this.refs.content, toolbar.state);
let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
let canvas = this.props.containedViewSelected === 0 ?
document.getElementById('canvas') :
document.getElementById('containedCanvas');
interact.dynamicDrop(true);
interact(ReactDOM.findDOMNode(this))
.draggable({
snap: {
targets: dragTargets,
relativePoints: [{ x: 0, y: 0 }],componentDidMount() {
let toolbar = this.props.pluginToolbars[this.props.id];
let apiPlugin = Ediphy.Plugins.get(toolbar.pluginId);
let config = apiPlugin.getConfig();
let box = this.props.boxes[this.props.id];
let container = box.container;
let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
let leftO = offsetEl.left || 0;
let topO = offsetEl.top || 0;
offsetEl;
let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });
let targets = this.props.grid ? [gridTarget] : [];
let dragTargets = this.props.grid ? [dragTarget] : [];
apiPlugin.afterRender(this.refs.content, toolbar.state);
let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
let canvas = this.props.containedViewSelected === 0 ?
document.getElementById('canvas') :
document.getElementById('containedCanvas');
interact.dynamicDrop(true);
interact(ReactDOM.findDOMNode(this))
.draggable({
snap: {
targets: dragTargets,
relativePoints: [{ x: 0, y: 0 }],componentDidMount() {
let toolbar = this.props.pluginToolbars[this.props.id];
let apiPlugin = Ediphy.Plugins.get(toolbar.pluginId);
let config = apiPlugin.getConfig();
let box = this.props.boxes[this.props.id];
let container = box.container;
let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
let leftO = offsetEl.left || 0;
let topO = offsetEl.top || 0;
offsetEl;
let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });
let targets = this.props.grid ? [gridTarget] : [];
let dragTargets = this.props.grid ? [dragTarget] : [];
apiPlugin.afterRender(this.refs.content, toolbar.state);
let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
let canvas = this.props.containedViewSelected === 0 ?
document.getElementById('canvas') :
document.getElementById('containedCanvas');
interact.dynamicDrop(true);
interact(ReactDOM.findDOMNode(this))
.draggable({
snap: {
targets: dragTargets,function dragSmallSquare() {
// target elements with the "draggable" class
Interact('.draggable')
.draggable({
// enable inertial throwing
inertia: false,
// keep the element within the area of it's parent
restrict: {
restriction: document.getElementById("before-image-canvas"),
endOnly: false,
elementRect: {top: 0, left: 0, bottom: 1, right: 1}
},
snap: {
targets: [
Interact.createSnapGrid({x: 8, y: 8})
],
range: Infinity,
relativePoints: [{x: 0, y: 0}]
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener
// call this function on every dragend event
});
function dragMoveListener(event) {
var target = event.target;
// keep the dragged position in the data-x/data-y attributescomponentDidMount() {
let toolbar = this.props.pluginToolbars[this.props.id];
let apiPlugin = Ediphy.Plugins.get(toolbar.pluginId);
let config = apiPlugin.getConfig();
let box = this.props.boxes[this.props.id];
let container = box.container;
let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
let leftO = offsetEl.left || 0;
let topO = offsetEl.top || 0;
offsetEl;
let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });
let targets = this.props.grid ? [gridTarget] : [];
let dragTargets = this.props.grid ? [dragTarget] : [];
Ediphy.Plugins.get(config.name).getConfig();
Ediphy.Plugins.get(config.name).afterRender(this.refs.content, toolbar.state);
let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
let canvas = this.props.containedViewSelected === 0 ?
document.getElementById('canvas') :
document.getElementById('containedCanvas');
interact.dynamicDrop(true);
interact(ReactDOM.findDOMNode(this))
.draggable({
snap: {
targets: dragTargets,componentDidUpdate(prevProps, prevState) {
let toolbar = this.props.pluginToolbars[this.props.id];
let box = this.props.boxes[this.props.id];
let node = ReactDOM.findDOMNode(this);
let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
let leftO = offsetEl.left || 0;
let topO = offsetEl.top || 0;
let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });
let snap = { targets: [], relativePoints: [{ x: 0, y: 0 }] };
let snapD = { targets: [], relativePoints: [{ x: 0, y: 0 }] };
let snapSize = {};
if (this.props.grid) {
snap = { targets: [gridTarget], relativePoints: [{ x: 0, y: 0 }] };
snapD = { targets: [dragTarget], relativePoints: [{ x: 0, y: 0 }] };
snapSize = { targets: [
{ width: SNAP_SIZE, height: SNAP_SIZE, range: SNAP_SIZE },
] };
}
if (prevProps.pluginToolbars[this.props.id] && (toolbar.showTextEditor !== prevProps.pluginToolbars[this.props.id].showTextEditor) && box.draggable) {
interact(node).draggable({ enabled: !toolbar.showTextEditor, snap: snapD });
} else {
interact(node).draggable({ snap: snapD });componentDidUpdate(prevProps, prevState) {
let toolbar = this.props.pluginToolbars[this.props.id];
let box = this.props.boxes[this.props.id];
let node = ReactDOM.findDOMNode(this);
let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
let leftO = offsetEl.left || 0;
let topO = offsetEl.top || 0;
let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });
let snap = { targets: [], relativePoints: [{ x: 0, y: 0 }] };
let snapD = { targets: [], relativePoints: [{ x: 0, y: 0 }] };
let snapSize = {};
if (this.props.grid) {
snap = { targets: [gridTarget], relativePoints: [{ x: 0, y: 0 }] };
snapD = { targets: [dragTarget], relativePoints: [{ x: 0, y: 0 }] };
snapSize = { targets: [
{ width: SNAP_SIZE, height: SNAP_SIZE, range: SNAP_SIZE },
] };
}
if (prevProps.pluginToolbars[this.props.id] && (toolbar.showTextEditor !== prevProps.pluginToolbars[this.props.id].showTextEditor) && box.draggable) {
interact(node).draggable({ enabled: !toolbar.showTextEditor, snap: snapD });
} else {
interact(node).draggable({ snap: snapD });gridTarget: function () {
return this.grid ? interact.createSnapGrid({
x: this.grid[0],
y: this.grid[1]
}) : null
},
minWidth: function () {componentDidUpdate(prevProps, prevState) {
let toolbar = this.props.pluginToolbars[this.props.id];
let box = this.props.boxes[this.props.id];
let node = ReactDOM.findDOMNode(this);
let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
let leftO = offsetEl.left || 0;
let topO = offsetEl.top || 0;
let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });
let snap = { targets: [], relativePoints: [{ x: 0, y: 0 }] };
let snapD = { targets: [], relativePoints: [{ x: 0, y: 0 }] };
let snapSize = {};
if (this.props.grid) {
snap = { targets: [gridTarget], relativePoints: [{ x: 0, y: 0 }] };
snapD = { targets: [dragTarget], relativePoints: [{ x: 0, y: 0 }] };
snapSize = { targets: [
{ width: SNAP_SIZE, height: SNAP_SIZE, range: SNAP_SIZE },
] };
}
if (prevProps.pluginToolbars[this.props.id] && (toolbar.showTextEditor !== prevProps.pluginToolbars[this.props.id].showTextEditor) && box.draggable) {
interact(node).draggable({ enabled: !toolbar.showTextEditor, snap: snapD });
} else {componentDidUpdate(prevProps, prevState) {
let toolbar = this.props.pluginToolbars[this.props.id];
let box = this.props.boxes[this.props.id];
let node = ReactDOM.findDOMNode(this);
let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
let leftO = offsetEl.left || 0;
let topO = offsetEl.top || 0;
let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });
let snap = { targets: [], relativePoints: [{ x: 0, y: 0 }] };
let snapD = { targets: [], relativePoints: [{ x: 0, y: 0 }] };
let snapSize = {};
if (this.props.grid) {
snap = { targets: [gridTarget], relativePoints: [{ x: 0, y: 0 }] };
snapD = { targets: [dragTarget], relativePoints: [{ x: 0, y: 0 }] };
snapSize = { targets: [
{ width: SNAP_SIZE, height: SNAP_SIZE, range: SNAP_SIZE },
] };
}
if (prevProps.pluginToolbars[this.props.id] && (toolbar.showTextEditor !== prevProps.pluginToolbars[this.props.id].showTextEditor) && box.draggable) {
interact(node).draggable({ enabled: !toolbar.showTextEditor, snap: snapD });
} else {interactjs
Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
