desandro/draggabilly

:point_down: Make that shiz draggable

draggabilly's Issues

Snapping to grid

Would be great to have a possibility to snap to a grid while dragging.
Would you consider adding such a feature at some point?

"Un"Handle

I'm looking for a way to have children elements within a draggable element (such as buttons) to function like normal instead of starting a drag. Basically, an opposite to the current handle property which is "Nothing starts drag except this", so rather a "Everything starts a drag but this". Is it possible at the moment, and if not, can it be added in the future?

The problem is, despite not starting a drag, all the children elements are still intercepting the click, and so I can't bind a click event to a child element.

On Firefox 26.0, dragging leaves an artifact on the screen

When testing on:

http://draggabilly.desandro.com/

There is a left border artifact:

Not sure how to include with AMD

Hi!

I'm working on a transport issue.

When I include draggabilly.js as an AMD dependency, it tries to track down the dependencies of your library in the context of my app. Is this appropriate? Here's the output I see:

GET http://assessments-front.dev/get-style-property.js 404 (Not Found) require.js:1872
Uncaught Error: Script error for: get-style-property
http://requirejs.org/docs/errors.html#scripterror require.js:163
GET http://assessments-front.dev/classie.js 404 (Not Found) require.js:1872
GET http://assessments-front.dev/eventEmitter.js 404 (Not Found) require.js:1872
GET http://assessments-front.dev/eventie.js 404 (Not Found) require.js:1872
GET http://assessments-front.dev/get-size.js 404 (Not Found)

I see why this is (the amd define at the bottom of draggabilly indicates those dependencies. What is the right way to resolve this? Should I add require config to map these module names to the correct dependency path? I don't see those dependencies in the draggabilly project.

Add packaged version to bower install

As my requirejs baseUrl is not the bower_components folder, having to add an extra path config for every draggabilly dependency is quite tedious.

please add a packaged version to the repository/bower install.

AMD support

Is there any chance of AMD support coming?

Multiple draggabillies?

I was hoping to implement Draggabilly for a project where jQuery UI sortable just isn't cutting it for dragging between lists. Any plans for supporting this?

Handling touchcancel

Your library is missing a "touchcancel" binding which is really important to touchable device.

For instance, on an iPad, if you do a gesture during a drag it will stay the dragging element in an inconsistant state ("dragging" state while the touch has end).
With touch events, If you listen to "touchcancel" you can know something else has occured and you can stop the drag.

Awesome library otherwise.

[NFR] Dragging of rotated items

Hi,

First of all, THANK YOU for your work on Draggabily.

I am trying to implement DND of items that have CSS rotate transformation applied:

{transform: rotate(-55deg)}

When such items are clicked, they revert back to 0 degrees and containment margins behave incorrectly.

Would it be possible to fix it?

Thanks!

Browser & device support

I'm limited to testing with what I've got lying around. I would very much appreciate if you can test out http://draggabilly.desandro.com/ and report back. That'd be delightful.

Unless noted with a 💔, Draggabilly works on the following devices and browsers. See #8 for broken devices and browsers.

• Google Chrome, Firefox, Safari on OSX
• IE8, 9
• IE10
• Android 2.2
• Android 2.3 HTC Desire
• Android 4.1: Chrome on Android 4.1.1 , Galaxy Note II
• Android 4.2: Galaxy Nexus Android 4.2.2 - Chrome 25, Samsung Galaxy S2, chrome browser, android 4.2.1 in Native, Chrome, & Firefox
• iOS 5 (iPhone 4), iPad 2
• Opera Mobile Emulator
• 💔 Opera Beta on Android
• Microsoft Surface
• Any Android tablet
• Kindle Fire (1st gen)
• 💔 Microsoft Windows Phone Window Phone 7
• Google Chromebook Pixel (which has support for both touch and mouse events)
• Wii U
• 💔 Nokia Lumia 920
• BlackBerry 10 browser

... and lots more. Feel free to chime if you have tested it in something else.

emit dragStart when element starts moving, not on pointer down event

This is consistent with jQuery UI Draggable. It makes sense, as it prevents moving logic from being triggered when it doesn't have to.

I'm running into a problem on a Packery+draggable demo, trying use just pointer events. When item is 'clicked' (pointer doesn't move), I want to do different logic.

Eh, this may be problematic in the long run.

How to make controls clickable

I use Packery.js together with Dragabilly. Inside the container I have <select> tag.

When I click anywhere on the container, drag event starts. Also on child elements. This prevents drop down from opening. Example under this link:

http://jsfiddle.net/Tschareck/tXdqw/1/

How can I override dragging, and instead open dropdown or fire Button event, when I click on it?

Containment viewport

I only know how to contain on html elements, any way to contain to viewport?

Move items from one container to a different one

Hi!

This is a great library, thank you! I have one question, tho:

Is it possible to define somehow that items can be dragged from one packery container to another? This would be awesome!

Thanks in advance
BR

Breaks when element has right or bottom set

Add a 👍 reaction to this issue if you ran into this issue and would like to see it fixed. Do not add +1 comments — They will be deleted.

add support for snap

damn David when do you sleep? the multitouch thing is killer. Love how small it is. One big request: if you can add snap behaviors a la JQUI that would be superfresh:

http://jqueryui.com/draggable/#snap-to

For app-style UI panels this is often an essential option...

Not working on Android

https://twitter.com/GarciaWebDev/status/313724980691095552

i'm trying Draggabilly, it's great but demo demo not works on my mobile (Opera, Firefox, Android): items selected but not dragged.

npm repo

Just wanted to give you a heads up that I'm using npm as a packager for both frontend and backend code, and wanted to use Draggabilly via npm but I noticed it doesn't exist yet (https://www.npmjs.org/package/draggabilly).

handle example gets stuck behind code display

Constrain X & Y movement with SHIFT key

Would it be possible to add a feature that would force movement of dragged objects only along X or Y axis when SHIFT key is held.

Thanks!

Pointer event is not structured well in IE8

Hi there @desandro,

first of all, thanks for this kick-ass library, I love how light it is. However, I do have a project which relies on having IE8 support and noticed that in IE8 pointer.pageY and pointer.pageX attributes return undefined:

@drag.on "dragEnd", (instance, event, pointer) ->
  console.log pointer.pageX # undefined
  console.log pointer.pageY # undefined

In my code I fixed this with jQuery's help: jQuery.event.fix(pointer):

@drag.on "dragEnd", (instance, event, pointer) ->
  pointer = jQuery.event.fix(pointer)

I needed a quick workaround, so jQuery saved me on this. So I'm just letting you know that since in the README it's stated that IE8 is supported, you should take note on the matter. :)

Cheers

Version 1.1.4 of get-size breaks AMD / bower installation of Draggabilly

Hi!

Just for information, not sure if you'd want to bind Draggabilly to version 1.1.3 of get-size, since this change pretty much crashes AMD config with require.js, at least in setup where using simple component lib for bower stuff (I define, as I suspect others who use bower/amd/require, Draggability deps on boot.js or similar and get-style-property/get-style-property botches loading as Draggabilly wants just 'get-style-property' AMD dependency on 1.0.4.

  define( [ 'get-style-property/get-style-property' ], defineGetSize );

line 176 on get-size.js.

It's a nasty jungle with module loading :(

Can lose dragged items

I can lose the orange boxes on the home page by dragging them off the left or top of the page. Should there be a default to limit these to the document?

Demo Site Bug

Hey man,

Just thought I let you know that there's a bug in the demo site that's making one of the examples not draggable.

The notify function in scripts.js has the old ordering of the arguments before draggabilly became v1.0.1, just gotta switch 'draggieInstance' to be the 2nd argument instead of the 4th!

Anyways, just wanted to bring that to your attention is all!

Scroll

When you drag an element close to the viewport's edge, it should scroll -- if enabled.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

jQuery UI Draggable has some nice options for this: scroll, scrollSensitivity, and scrollSpeed.

A possible awkward scenario involves when you have multiple dragging elements, one of the is ready to trigger scroll, but then another is at an opposite edge. Ideally the scroll should only be triggered while keeping every dragging element in the viewport.

Events section on http://draggabilly.desandro.com/ and FF23

Hi, I've just noticed that your example in the "Events" section on your site for Draggabilly has an issue in FF23 (and I think in all other FF versions, too).

The grey box which should contain messages from events (CSS selector: #evented) doesn't show anything while dragging in FF. The problem is that you use innerText property in your code (scripts.js:53) to set a new message. FF only supports the proprietary textContent property to set text. As you're not using any HTML in your messages, you could simply switch to innerHtml to make this cross-browser compatible.

I'm not sure if this is the right place to post this bug but I couldn't find any other place.

Form inputs inside of Draggabilly

Form inputs inside of a Draggabilly element can not be (easily) focused. I've manage to get it to take focus a couple times, but always by doing something weird to it like right-clicking on it.

I assume this is because Draggabilly is commandeering all click events for the parent. I don't think this would ever be the expected behavior, so might want to prevent this from happening or at least offer a way around it.

Minimum test case: http://cdpn.io/zoDbt

Make handle a live selector

I have a situation where i want to drag elements by a handle that is only later inserted into the draggable element. Is it possible to make the handle a live selector?

Demonstrate best way for non-draggable stuff

Like if you have a draggable element and you don't want other stuff to be draggable.

Multiple drag in iPad;

In tablet devices we can selected multiple drag elements with our fingers, and we can drag all of them together. Can we have any flag to force just one drag at a time. Since we have 'is-dragging' we can check if there exist any element which is currently dragging.

contained draggies wont stay in container on container resize

hello,
i am trying to have a contained drag experience for elements with a possible change of the container size. draggies will ignore that and not stay contained.

initial position is achived with left: 100%; and -30px; on a 30px whide box.
which is achiving the expected behaviour initially but is ruined once you start dragging then proceed changing size of the container…

http://jsfiddle.net/LPLXw/2/

do u think this would be a expected behaviour?

Firefox 22 dragging item disappears

From https://twitter.com/blissdev/status/313699611304947713

It seems like there’s issues with Draggabilly in Firefox22. Item disappears until I drop. Is this expected? http://screenr.com/SgY7

https://twitter.com/blissdev/status/313709254244700160

OS X. That was UX Nightly so maybe there are issues there. Tried in normal Nightly and you’re right, it’s fine.

---

I wasn't able to reproduce this bug in Firefox 22 on OSX. If you are able to do so, please chime in.

IE8 - Using Packery Widgets Can Error Out

Using IE8, I am able to create an error condition with the following code with an error of:

Unable to get property 'events' of undefined or null reference.

Draggabilly.prototype._unbindEvents = function () {
var args = this._boundEvents;
for (var i = 0, len = args.events.length; i < len; i++) {
var event = args.events[i];
eventie.unbind(args.node, event, this);
}
delete this._boundEvents;
};

Using the debugger I found that args / this_boundEvents is undefined. As a workaround I can put this statement around the for statement. It causes IE8 to act mostly normal but probably isn't a perfect solution:

if(args !== undefined)

I can also get the error to occur here on IE8: http://packery.metafizzy.co/draggable.html

If anyone has any ideas what might be happening I'd appreciate it! Thanks!

Firefox Mobile move event demo not showing

Per https://twitter.com/GarciaWebDev/status/313749660206522370

now on the Events section, no text appears on the black box on dragging, but only on Firefox Mobile 19

Broken devices and browsers

These browser and devices have been tested and reported that Draggabilly does not work.

• Nokia Lumia 920 see tweet from kevmcdonk
• Opera Beta on Android - see here
• IE on Windows Phone 7 - tweet from amarchadgar
• Opera Mini - although - this is to be expected. Opera Mini is especially limited when it comes to interaction.
• Microsoft Surface Should be resolved in v1.1.0

Does not work well with SVG

Hi there ! I just found an issue with Internet Explorer (tested with 11), errors occure while dragging SVG elements.

Here is a test : http://jsfiddle.net/Totjoss/MJJH8/

Please update to 1.0.5

Bower currently installs 1.0.4.

how to drag item larger than its container but still be 'contained'

Thank you for this plugin, I would like the containment option to also work if the element being dragged is larger than its container. Once you get to the edge of the dragged element, you should not be able to drag further away from the edge (thus cropping the inner element OR showing too much space/padding by dragging it away from the edge). Do you think something like this is possible? It's for a responsive site I'm working on, so the values need to be recalculated on window resize (but the draggable container stays the same width).

1.0.7 does not work with touch on Surface 2 IE11/Chrome and Lumina Windows Phone 8 IE10

I did some testing on these devices and:

On Surface 2 Pro running IE11

• works with the stylus as intended
• does not work with touch. It starts dragging and then a split second later stops.
• If it's bound to packery, the item begins to dragg and then snaps back in to place a second later as it if loses focus of touch.

On Surface 2 Pro running Chrome

• works with stylus as intended
• items just bound to draggabilly work with touch
• items bound to packery and bound to draggabilly break/lose touch 50% of the time and then packery just breaks down (items randomly jump within the grid here & there)

On Lumina WP8 using IE11

• same effect as touch on Surface 2 if you're using your finger/touch/no stylus.

Kind of a PAI and we can thank MS for all their pointer changes, but just an FYI. David if you need help testing and you don't have these devices, I can help :)

Chris

Problem with dragging image on IE8 ?

Hello, I have a simple image that I want to be draggable. Here is my code :

It works everywhere except on IE8. The dragging starts but I lose it after a couple of pixels. And when I release the image, the dragging starts again, but I'm not on mouse down. And if I click again the image, I get this error.

I did try to put the image in a div and make the div draggable, but I get the same problem.

Thanks !

how to change DOM tree position while dragging?

Say I have an item I want to drag. While dragging, if the mouse gets to a certain point on the screen I want to remove the element being dragged from its current parent element and append it to a different element, and let the user continue to drag the element without noticing the DOM change. I can do this but as soon as the element is reinserted into the DOM it quickly changes position and now the drag is offset. Any ideas?

Right click problems when mixed with packery

need the ability to disable right click.

I patched it by adding

if(event.button !== 2)

at line 989

Distinguish on click event whether element was dragged or not

Food for thought. Let's say I have an element. A user may drag it about and drop somewhere else. They may also just quickly click on like they would a link. This element is being managed by Packery.

The question is, what's the best way to do different things for these behaviors? By default, the click handler will be fired whenever the element is dragged. But in the click handler you have no way to tell if the element was actually moved, or whether it was a quick-click.

A solution for this is to add a class to the element on 'dragMove', and remove that class only once you've done something after 'dragEnd'. Like packery's 'dragItemPositioned' event. The click handler fires between these two moments, so your click handler can check for that class and return early if it was recently dragged, so as not to fire 'quick click' behavior after a drag.

Is this the best way to accomplish this?

Example.

Add a 'was-dragged' class between dragEnd and dragItemPositioned:
https://github.com/gobengo/streamhub-packery/blob/master/src/main.js#L46

Return early in click handler if it was recently dragged:
https://github.com/gobengo/streamhub-packery/blob/master/examples/mediawall/index.html#L77

Any plan to support sorting?

Stop Getting instance postions outside parent container

Hi,
Thanks for this plugin. I need some help. I set containment: true it works for my object as its bounds to stay in parent.
The problem is when I try to drag my object outside parent container while pressing mouse I am still getting instance potions outside of parent although object does not move.

   var drag2 = new Draggabilly( ex2 );
   drag2.on( 'dragMove', function( instance, event, pointer ) {
       xvalue.value = instance.position.x;
       yvalue.value = instance.position.y;
    });

                           ( function() {
                                new Draggabilly( '.draggie', {
                                  containment: true,

                                  // axis: 'y'
                                });
                              })();

Packery/Draggability combination: older Ipad can't register clicks

When I use draggability in combination with Packery, I find that clicks bound with jQuery to the draggable items don't register in our first-gen iPad. No links enclosed within the draggable containers work, either. If I remove the draggability binding, they work fine.

Possibly related?
http://davidwalsh.name/translate3d

Add .disable() and .enable() methods

https://twitter.com/sn0lan/status/319359193519910912

One thing, is there a way to unbind it? I only need the dragging when an element is toggled.

applying on a width height in % or bottom, right element in chrome

Nice to see a not $ dragging thing, thanks 👍

• Chrome (25) wont return getComputedStyle in px so draggabilly element will be reposition to top 0 on start dragging when they have a width: 100% style (important part is the "%").
• Using bottom or right positioning will break the positioning in the same way.

Let me know if i'm confused or if you can't reproduce. I have no time at the moment to write a use case.

components folder is missing

I just downloaded this from github and nothing is draggable right now. The components folder is missing in the download.

AMD usage in EventEmitter means window.EventEmitter may be undefined

Hey @desandro,

Just wanted to bring this to your attention. If I completely missed a part of your instructions in your readme that addressed this, I apologize.

When I tried to use the draggabilly.pkgd.js with require.js, it'll tell me that window.EventEmitter is undefined. After tracing through the code, I found that this chunk of code does not put EventEmitter in the global scope if the define function can be found.

// Expose the class either via AMD or the global object
if(typeof define === 'function' && define.amd) {
define(function() {
return EventEmitter;
});
}
else {
exports.EventEmitter = EventEmitter;
}

Currently I just comment out everything but 'exports.EventEmitter = EventEmitter;' just to make it work. But I figured you (or anyone else that may be running into this issue) might want to know what I've found so far.

Thanks!