Tested on Windows 8.0 without service packs. IE10 version: 10.0.9200

No drag events are triggered at all it seems. No errors in console. Forcing IE9 and IE8 rendering works fine.

My code:

                var draggable = interact($el.get(0))
                    .draggable({});

I have some code that goes like this (this is Coffeescript, please understand):

    interact(document.querySelector 'div#dropzone')
      .dropzone(true)
      .accept('.draggable')
      .on('dragenter', (e) ->
        t = e.target
        if e.target != e.relatedTarget.parentElement.parentElement
          draggieSize = e.relatedTarget.offsetHeight
          t.style.height = "#{t.offsetHeight + draggieSize}px"
      )
      .on('dragleave', (e) ->
        e.target.style.height = ''
      )
      .on('drop', (e) =>
        @props.onDropDoc e
        e.target.style.height = ''
      )

I want to enlarge the dropzone when I arrive dragging some element, so there's more area to drop. But, despite being enlarged when I arrive with the dragged element, when I move the mouse, still dragging the element, from the original dropzone size to the enlarged part of the dropzone, the dropzone shrinks, as if the added height of the element wasn't part of the interactable.

What can I do?

I have a problem with autoScrolling. When I drag an interactable near the edges of the autoScroll container, the container is scrolled properly but the 'move' event is not fired on the element. So the element stays where it is instead of being dragged while sticked to the mouse pointer.

The same effect appears while manually scrolling when dragging an element, but I did not expect this to work.

So basically the mouse position should be calculated based on the scrolling container instead of the absolute position on the screen. Is that possible?

Setting the deltaSource property seems to have no effect at all for me.

Hi there!

Wonderful library. I'm trying to disable the resize cursor except 'e-resize' but haven't been able to figure it out.

Maybe this is a feature request or perhaps there is an easy work around. The element is also draggable.

Thanks again,
Luke

interact seems to favor dragging over gesturing. If you do not place two fingers on the screen at exactly the same time, it will call the draggable interact instead of the gesturable interact.

use case:
I'm using interact for the dragging/resizing of items in a grid. Each grid item has a draggable interact attached. The grid container has a gesturable interact that is used to resize the target item.

It's a little frustrating having the item predominantly drag instead of gesture.

Tested on ipad3 w. safari

I can see strange thing. On dragstart event object contains dx and dy with some values and dragmove was not fired for this initial movement. Does it mean i should implement node movement on dragstart too?
imho, dragmove should be triggered after dragstart immediately.

checkout fiddle and pinch/zoom on the items a few times. Eventually you will notice that the onend event does not log its output.

When this happens, it prevents other interactions from happening as well. It seems like its stuck.

Tested on ipad3 on safari.

Feature request: Provide an option to ease into a snap rather than jumping to the snap point on inertia end.

http://interactjs.io/repo/demo/snap.html

The snapping is working well in OSX Chrome but it is not very accurate on iOS (tested only on iOS 7). You can see it in this codepen http://codepen.io/jordandh/pen/sFDmo. If you swipe over to slide 1 and keep swiping in that direction it snaps back to the incorrect coordinate most of the time.

The dragged element (ex: textarea) has it's focus stolen after the drag, which means you can't type in it anymore.

This is fixed by calling textarea.focus(); in the onend callback, but I feel should happen automatically or be an option.

I've run into a problem where I get strange dx/dy values in dragmove under a certain circumstance. You can view this behavior in my slideshow example http://codepen.io/jordandh/pen/xlhgG. To reproduce it move to slide 1. Then do a swipe toward slide 2 but tap/click down during the inertia movement phase. Hold for a second and then let go. A large dx value is showing up in the next dragmove event.

It seems that resize can start affecting the element without the cursor being on the edge, and it can be hard to make it draggable afterward. Think the hover->resize design might be a good optiont to consider, like gridster http://gridster.net/demos/resize.html

First off, awesome library. I've been working with it in WebKit and it has gone swimmingly, but testing in IE10 I get breaking errors. It complains about line 4466,

selectorGesture = new Gesture();

saying Object doesn't support this action.

I would think it was an issue with my implementation, but the interactjs.io website throws the same errors. I tried incrementally rolling back versions until 1.0.7, where the errors no longer popped up. But this must have been before drop zones had an accept method because I get the error "Object does not support property or method accept"

I noticed the position is calculated from the mouse position, which means the restricted area is in a different position if I start dragging on a different position on the handle.
I can move my draggable object 80% outside of the restricted area if I set my mouse right, surely this should not be calculated from mouse position but object position.

Sorry for my question but is that even possible? I couldn't find any hint in the documentation or an example for this.

Snapping on drag works fine for me.

I do not understand to what element snap coordinates are relative.

There are 2 ways to define snap : By directly setting interact.snap or interact(element).snap. Does the first one sets a global snap, whereas the second one sets the snap for the element ? (I guess so).

When setting a snap, we can set "x" and "y" coordinates for each point, but are these coordinates relative to the document ? To the first positioned parent from the element ? To the element itself ?

Thanks for your help, interact.js is a really good work, doing just what it should.

It seems resizing an element is only enabled by default along the bottom and right borders. In other words, if the dotted lines in this image were element boundaries, the resize handles marked "X" would not work at all, and those marked "/" would only work along one dimension:

Is this behavior intentional, or am I doing something wrong? If the former, would you be amenable to a PR to enable resizing along all four borders?

This is a great library, thanks for the work and releasing it!
I was wondering if there was a way to make an element draggable, but only by clicking a handle in the element? That way, the whole element isn't clickable. Thanks!

Hi,

I'm trying to use interact.simulate to unit test my code, but I haven't been able to get it to trigger the event functions I've written. Here's an example of a simulate evaluation that isn't working as I expect:

In a skeleton HTML page with interact loaded, evaluate the following in the console:

var divElement = document.createElement("div");
divElement.innerText = "Hello World";
document.getElementsByTagName("body")[0].appendChild(divElement);
var eventToSimulate;
interact(divElement).draggable({
    onstart: function(event) {
        console.log(event);
        eventToSimulate = event;
    }
});

Next, trigger a drag event on divElement. Confirm that the event was logged to the console and assigned to eventToSimulate. Then, try the same event in a call to simulate:

interact.simulate("drag", divElement, eventToSimulate);

Expected behavior: divElement's onstart function is triggered, logging the event to the console.
Actual behavior: nothing is logged to the console.

(If I'm using simulate incorrectly, could I trouble you to provide a valid example of simulating an interact event?)

The new context option is not working correctly for interactables that use the same selector. I will use my scenario as an example. I have a list component that is used in multiple places on a page. Within a list you can drag and drop the items to reorder them. The interact call for the list component looks like this:

interact('ul > .list-item').context(listElement)...

The selector passed to interact is the same for each list component on the page. After the first call to interact the interactableGet function returns the same interactable for the selector ul > .list-item. It would seem that a new interactable needs to be made for each selector + context combination.

On ios7, it only drag work. Dropping doesn't work.
You can try this bug on your demo site in drag and drop section.

A link inside a draggable element does not fire a click event when clicked.

checkout plunkr and click the link in the item.

Only seems to happen on touch devices. (ipad3 android).

resize works fine if its for the first time rendered,
but when change any content inside, the resize stop working properly,
width / height jumped to max out integer size

The IE8 only array prototype addition causes all arrays to have a new member in IE8, the indexof function.

When iterating through arrays elsewhere in my javascript applications, it can break, because the code never expects there to be properties that aren't the array's own properties. There would need to be a manual hasOwnProperty check everywhere to fix this.

I think interact.js shouldn't do these kind of manupilations to native types, even if it's just to make things in IE8 work. Better drop IE8 compatibility if it's hard to support it IMO.

I fixed it by calling a local indexof function and replacting all calls to .indexof to use this local one. Not a great solution as well, but at least it's predictable. I could do a pull request if you're ok with using a none native function for all browsers.

I'm trying to test through resizable, and it seems the easiest way is through simulate? However, in doing so it seems I need to specify pressure, rotation, etc.?

How do we snap to a certain position once the drag position reaches some distance away from the snap point?

i.e. In the drag progress bar example you have, if you reach near 0 - 5%, then it will snap to 0% after the inertia bounce. Is it possible to have multiple snap points each snap point consisting of a position and a radius (around the position for which element will be snapped into the position)

If this is not a feature already, I can try and add it in.

Looking to achieve a touch ui with "throw to expand" image gallery with heavy touch interactivity offered by your codebase. Have you tested the GSAP Draggable script that allows for inertia based object "throwing" that snaps to a grid? I would love to see this play nice with your interact.js droppable code. Thoughts on how best to achieve this?

I greatly appreciate any direction as I have not seen any other examples on this around the interwebs.

None of the demos at interactjs.io are working for me in Safari and Chrome on iOS7. It also is not working on my own website using interactjs.

The demos are working for me in Chrome 35 on a Nexus 7 running Android 4.4.2.

Thanks for an excellent library that is exceptionally well written.

This is not exactly an issue, as I can easily work around it (and possibly I've missed something and you can already do it). But anyway I thought to impart knowledge and mention the following.

Drop abstractions

Nearly all DD libraries use draggables and dropzones - this is highly sensible. But if you really think about it from a software design perspective, you'll find that drops has two kinds:

• Drop within - when the draggable is dropped within a container (or an element).
• Drop in-between - when the draggable is dropped between two containers (or two elements).

TreeGrid example

For instance, I'm working on a tree-grid library where the widget may be used as a traditional tree (with some extra columns if one wishes) or as a table.

In both cases, when dragging a row (or a tree node) the drop is performed between two other rows (or tree nodes). In the case of trees at least, there can be an arbitrary amount of drop locations below or above each node (most notably, dropping below the bottom node will involve as many drop positions as the level of the node).

Thus, it is little-elegant to render a multitude of drop zones - it is much more sensible for the tree (or the table) to serve as a single drop zone that works out where drop is allowed as the use drags a proxy. Such single drop zone is also in charge of animations.

The request

It seems that at the moment there is no way for a dropzone to receive dragmove events. Given the above, I think such feature is sensible.

I drag the interactable and throw it causing it to continue moving with momentum/inertia.
If I grab and drag it again while it is moving the onmove event.dy value gives a large value.

You can see this behavior in the first demo on http://interactjs.io. Throw the interactable and quickly grab and throw it again. You will see it instantly jump back to it's initial state.

Looks like there is an typo in getDrop function:

    // get the most apprpriate dropzone based on DOM depth and order
    drop = resolveDrops(elements);
    dropTarget = drop? dropzones[drop.index]: null;

you get dropTarget from dropzones, but should get it from drops.

Great software! Just what I needed for creating a quiz for my students (put the right answer in the right box). However, I am still struggling with the snap function. I made anchor points. If I move around the first draggable item, it works perfect. However, when I drag the other items, they are not neatly displayed. The x-coordinate of the anchors is always 120, so all the items should be shown in a straight vertical line. But there are not, it is all a bit messy. It the script not made for more than 1 draggable item. Or did I miss some settings? Thanks for your support.

I'm planning on using this library in an app that will be built using browserify. However the library doesn't seem to be registered on npm. This normally isn't a problem since it's quite easy to install directly from the git repo.

Unfortunately in this case the package.json name field is interact which is actually already in use on npm. When running npm install with the correct information in my package.json I end up installing the unwanted package.

So the library needs to be registered and the package.json name needs to be changed.

Is it possible with the library to see if an interaction was a quick flick? I'm sure I can write this myself using the dragmove and dragend events to look at the direction and speed of the drag in the last x milliseconds. I'd rather not write that code if the library already has someway of determining that already. I am using this for a slideshow control that behaves similarly to the iOS Weather app. Ideally I could do something like this:

interact('*')
    .draggable(true)
    .on('dragend', function (event) {
        if (event.isFlick) {
            if (event.isFlickToTheLeft) {
                // Slide in the panel from the right
            }
            else if (event.isFlickToTheRight) {
                // Slide in the panel from the left
            }
        }
        else {
            // Determine which panel fills up the most space in the viewport and slide it in
        }
    })

I am currently doing it on the onend and onstart but that doesn't seem to be a good workaround.

I am having an issue using snapping on my slideshow control. I have a pen of it here
http://codepen.io/jordandh/pen/xlhgG

The slideshow only drags left and right and when dragging is completed the slider should continue sliding from interia and then snap to the nearest slide.

When the inertia phase of the dragmove is over the .slideshow-slider does not snap to a slide. I can't really tell how it is choosing its snap coords but they do not look correct. Maybe my snap options are not setup correctly though.

Any thoughts on what is going wrong here?

in function InteractEvent
this.interactbale = target;
seems like a typo.

Is it possible to make dragging work only for the left mouse button?

I'm sure I can add my own logic in an actionChecker function that only lets events for the left mouse button continue. Is there a configuration option to set this behavior or should I go ahead and implement it myself in a custom actionChecker?

This is more of a question than an issue. I have a widget menu div that I want to drag elements from onto the drop zone, position, resize and save them. When the widgets are taken out of the drop zone I want them to snap back to their original position in the widget menu div or go back to some explicit x,y position within the widget menu div. Is this possible?

Should it be done on leaving the drop zone as a dragleave function or should it be a second drop zone? Do you have any examples of how this might work? Do multiple drop zones work?

Hey there. Really cool work here!

I've been trying to use this as a method to drag bootstrap modals by their header, but any buttons I put in are not being ignored. Example here: http://codepen.io/SimeonC/pen/qzCto

Issue is that when I click and drag on a button (either cancel or send) I expected the ignoreFrom: 'button' part to stop the modal being dragged around (prevent dragging). As it is you can still drag the modal by clicking on either of the buttons.

Have I done something wrong?

Soon...

I am trying to replicate the behavior of the iOS weather app. The weather app lets you drag the current panel left and right to get to other panels (locations for weather). You can either drag the next panel into view and release which then slides the new panel completely into view. Or you can flick left and right to go to the panel in that direction.

I have some of the behavior working well but I am running into a problem on touch devices. I can slide the panels left and right but I lose the ability to scroll the page up and down on the interactable. Is there a way in the library to ignore touches that move mostly in the vertical direction? If not do you know how I can make it behave this way through event handlers using interact's events?

I think the touch events on the interactable are not bubbling up or are having their default behavior prevented. And I think that this is happening at the library level so I am not sure how I can stop it from preventing the default behavior.

I'm working a dashboard that needs drag & drop widgets, resizeable. Interact.js seems to be good to our need, but I cannot find an example of how to implement resizable, can you help?

Thanks.

I'm currently working on an editor where you have a list of draggable elements which can be dropped to multiple places (aka dropzones) within the page. It works totally great so far.

But I would like to highlight the possible dropzones on the page when the user starts dragging.

At the moment there are only events for dragenter, dragleave and drop at the dropzone. So I can only highlight it when an accepted draggable is already right over the dropzone.

jQuery UI droppable provides such callbacks: dropactivate and dropdeactivate.

I think these two events would be a great benefit for interactjs!

Also you may have an idea how to achieve this right?

Is it possible to have interact.js not allow the dragging of an element if the mousedown occurred on a child input or anchor element?

Just tried to integrate interact with a simple React component and although interact is initialised correctly and is receiving events, nothing is happening. I suspect the issue could be down to React's synthetic events system (http://facebook.github.io/react/docs/events.html) which which may be causing issues for interact.

I've created a Fiddle to illustrate the issue.
http://jsfiddle.net/G79D9/

This is a great library and I'd love to use it so I hope there's an easy fix ;)

Hi,
The interactjs.io home page have examples which use target.style.webkitTransform - which does not work in IE10-.

I replaced the onMove code with

onmove: function(event) {
var elementStyle = event.target.style;            
elementStyle.left = parseInt(elementStyle.left) + event.dx + "px";
elementStyle.top = parseInt(elementStyle.top) + event.dy + "px";
}

Which does not move the box at all. The drag works but the target does not moves with the mouse.
http://codepen.io/anon/pen/KpGcf

android 4.4.4 w. Chrome browser

I am trying to restrict an element within the container (the boundary of inside div shouldn't go out or cross the container div's bounds) and not sure what the config would look like.

On top of that, I don't know if snap() triggers any events. I tried .snap.on('end') but that didn't trigger anything. I need to update something on snap so.

Snapping and restricting jumps to its final position when the element has no inertia at the end of a drag. As discussed in issue #32 a boolean smoothEnd setting should be added to allow for animated snapping and restricting with no inertia.