How to use the interactjs.dynamicDrop 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 
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 }],
},
enabled: box.draggable,
restrict: {
restriction: dragRestrictionSelector,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
},
autoScroll: {
container: canvas,
margin: 50,
distance: 6,const holder = ReactDOM.findDOMNode(this.refs.holder);
holder.addEventListener('mousewheel', this.handleScroll);
let container;
if(this.props.containedViewSelected !== 0) {
container = "containedCanvas";
}else{
container = "canvas";
}
let elContainer = document.getElementById(container);
interact.dynamicDrop(true);
interact(".rib")
.draggable({
inertia: true,
onstart: function(event) {
changeOverflow(true);
let original = event.target;
let parent = original.parentNode;
let dw = original.offsetWidth;
let clone = original.cloneNode(true),
x = (parseFloat(original.getAttribute('data-x') - dw, 10) || 0),
y = (parseFloat(original.getAttribute('data-y'), 10) || 0);
clone.setAttribute("id", "clone");
clone.setAttribute('data-x', x);
clone.setAttribute('data-y', y);
parent.appendChild(clone);
// translate the elementlet 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 }],
},
enabled: box.draggable,
restrict: {
restriction: dragRestrictionSelector,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
},
autoScroll: {
container: canvas,
margin: 50,
distance: 6,
interval: 10,interactjs
Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
