NAV Navbar

FAQ

This is a set of questions and issues that are frequently raised on Gitter chat and Github issues.

Start action after hold

interact(target)
  .draggable({
    manualStart: true
  })
  .on('hold', function (event) {
    var interaction = event.interaction;

    if (!interaction.interacting()) {
      interaction.start({ name: 'drag' },
                        event.interactable,
                        event.currentTarget);
    }
    });

Use the manualStart option to disable the default start sequence (down, move, <action>start…) then in a hold event listener, start a new interaction with Interaction#start.

If you are having problems with default browser behaviour like scrolling, context menus, etc. have a look at the Interactable#preventDefault method and this thread on Github.

Clone target draggable

<div class="item"></div>
interact('.item')
  .draggable({ manualStart: true })
  .on('move', function (event) {
    var interaction = event.interaction;

    // if the pointer was moved while being held down
    // and an interaction hasn't started yet
    if (interaction.pointerIsDown && !interaction.interacting()) {
      var original = event.currentTarget,
          // create a clone of the currentTarget element
          clone = event.currentTarget.cloneNode(true);

      // insert the clone to the page
      // TODO: position the clone appropriately
      document.body.appendChild(clone);

      // start a drag interaction targeting the clone
      interaction.start({ name: 'drag' },
                        event.interactable,
                        clone);
    }
  });

There’s no direct API to drag a clone of the target element. However, you can use Interaction#start to change the target of an interaction to any element that you create.

Remove an Interactable

interact(target)
  .draggable(true)
  .resizable(true);

interact.isSet(target);         // true

interact(target).unset();

interact.isSet(target);         // false
interact(target).draggable();   // false
interact(target).resizable();   // false

To remove an Interactable, use interact(target).unset(). That should remove all event listeners and make interact.js forget completely about the target.

Changing dropzones while dragging

interact.dynamicDrop(true);

If you’re adding/removing dropzone elements or changing their dimensions while dragging, you may need to change the dynamicDrop setting to true so that the dropzones rects are recalculated after every dragmove.

Drag handle

<div class="item">
  A draggable item
  <div class="handle"> Handle </div>
</div>
interact('.item')
  .draggable(/* ... */)
  .allowFrom('.handle');

To make an element be the handle of a parent draggable, use the allowFrom setting to allow an action to start only if the element matches a certain CSS selector or is a specific element.

Revert/restore/undo drag position

There’s no direct API to revert a dragged element to it’s position before the drag. To do this, you must store the position at dragstart and change the element’s style so that it returns to the start position on dragend. You can use CSS transitions to animate change in position.

Touch input on Internet Explorer

.draggable {
    -ms-touch-action: none;
        touch-action: none;
}

To allow touch interactions on Internet explorer, the touch-action CSS property must be used.

Dragging between iFrames

There is limited support for using interact.js across iFrames. There are currently browser inconsistencies and other issues which have yet to be addressed.