fatlinesofcode/ngdraggable

Drag and drop module for Angular JS

ngDraggable

NOTE: I'm not actively maintaining this project any more. If any anyone would like to take on that responsible please get in touch

Drag and drop module for Angular JS with support for touch devices. demo.

Usage:

• Install: bower install ngDraggable
• Add angular and ngDraggable to your code:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="ngDraggable.js"></script>

• Add a dependency to the ngDraggable module in your application.

angular.module('app', ['ngDraggable']);

• Add attribute directives to your html:

Draggable usage:

<div ng-drag="true" ng-drag-data="{obj}" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true">
  Draggable div
</div>

• ng-center-anchor is optional. If not specified, it defaults to false.
• If the draggable is also clickable (ng-click, ng-dblclick) the script wont react.
• You can define a drag-button as child with the attribute ng-drag-handle.

ng-drag-start and ng-drag-move is also available. Add to the ng-drop element. ng-drag-stop can be used when you want to react to the user dragging an item and it wasn't dropped into the target container.

draggable:start, draggable:move and draggable:end events are broadcast on drag actions.

Drop area usage:

<div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" >
  Drop area
</div>

Angular Controller:

app.controller('MainCtrl', function ($scope) {
    $scope.onDragComplete=function(data,evt){
       console.log("drag success, data:", data);
    }
    $scope.onDropComplete=function(data,evt){
        console.log("drop success, data:", data);
    }
 };

Examples

Drag and drop.

Re-ordering.

Cloning.

Canceling.

Pull requests

We welcome pull requests but please check that all the examples still work if you modified the source base. There have been serveral PRs recently that broke core functionality. If you are feeling really keen you could include some protractor test cases in your PR.

ngdraggable's Issues

can the drag area be constrained to a div?

Inverted element position in Scrollable Element

When dragging an element within a scrollable container the dragged elements position is inverted in relation to scroll offset. see an example here :

side note : touch delay set to 500ms

touch detection

('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch would be more reliable. It's the way it's done in modernizr.

Prevent dragging when clicking

May be you can help me about :

http://stackoverflow.com/questions/25885804/both-clickable-and-draggable-area

thanks

Use inside a bootstrap modal

I know this is probably a bit too specific of a use case to deal with but wondering if this works and I'm just doing something wrong.

When using inside a bootstrap modal it drags the element quite a far bit offset from where you click. I'm assuming this is to do with how it calulates the offset of the mouse + element + window.

If there isn't a way to sort this already I don't mind looking into it but didnt want to start any work in case its been done somewhere!

Drag-handles

Would it be possible to use drag-handles?

dependecy of jQuery

is the dependency of jQuery ($) really necessary for this directive? Couldn't it be replaced by angular.element on lines 18 and 19 and plain removed on line 260 (since element.find('img') will already return a jqLite object)?

Remove jQuery requirement

Please, make your plugin code do not require jQuery.
Thanks.

Clickable tags/inputs inside draggable

I would like to include "Clickable" objects inside the draggable. I got this to work adding this to the onpress event.

if (evt.target.type === 'button' || evt.target.type === 'INPUT' || evt.target.tagName === 'A') return;

ngDragClone directive sets the wrong width in the onDragStart function

onDragStart function sets the width equals to the height of the element instead of its width.

Line 267: element.css('width', obj.element.height());

Scrolling while dragging?

Is it possible to have the window scroll in the direction that I am trying to drag my element?

Item Dislocation

First off, thanks for making this. It is really simple and easy to use and has all the features that I personally need. But I've ran into a problem as you might be able to tell from the attached picture. I click on the item and start dragging it but the text/item I am dragging is super far away from my cursor which in turn makes it hard to know where the item is being placed (in a user's mind).

Any suggestions are welcomed..

On windows scroll reorder elements

Hi, is page scrolling when we want to drag an element, does page scroll also on drag ?

Reset function

Hey guys,

I was wondering why do you need the reset function?
I have made an app where I am using your directives but the difference is that I am draging some elements within a container. Because of the reset function my elements where going to the top left corner of the container on click. I have commented it out and it seems to be working. I can provide an example if you wish.

Elvis

Module name doesn't match documented module name

I had to use angular-draggable in my dependency list instead of ngDraggable as suggested by the README.

angular.module('app', [ 'angular-draggable' ])

Can you kindly add a license?

May I suggest MIT?

Thanks

Stacking droppable elements?

Currently if I several elements that all conform to the ngDrop directive, and some of them are stacked on top of one another. If I were to drop a draggable element on top of two stacked elements then the callbacks for both ngDrop elements will be triggered. Is it currently possible to prevent this? Or rather to only have the event triggered for the top element, or any way to specify which element should have priority over another?

ngDraggable assumes jquery wrapped element passed to the directive

I was integrating ngDraggable and I was running into an exception when you try to call element.offset(...) because offset is a jquery specific function. I was able to resolve this issue by adding "element = $(element)" to the link function within the directives.

Option to keep the dragged element at its place during drag move (drag a copy)

Hi,

your module is really great. The cool thing is that mobile support is working well out of the box. Nice job!
I just have one request towards perfection. Would it be possibly to only drag a (visual) copy of the dragged element around, so the source element can stay at its original place during the drag process?

Great work so far,
Frank

Get mouse position on drop success

Its posible to get the mouse position when drop-succes is triggered?

Mobile Support

Which of mobile Browsers are supported by this library.

<select> tag inside ngDraggable

I go through the issue #12 and I tried the same logic but it's not working. So, want to ask that how can I use dropdown menu within ngDraggable. I used ng-prevent-drag directive and it allow me to click on dropdown but it doesn't populate the options.
Any suggestions ?
Thanks

Where is the dropped object?

Hello and thanks for this effort! I'm trying to figure out which li object has received the drop, but I can't find it in the event data structure. Is the target element available?

Thanks,
-dqj

offset is undefined

I tried the lib on my application but I get an error on line 89
offset = element.offset();

Uncaught TypeError: undefined is not a function

So I tried the example.html on jsfiddle with the same problem, what can be wrong?

http://jsfiddle.net/qBSL3/

Dependency on jQuery not listed in bower.json

This code seems to be dependent on jQuery.
($(document) and element.offset() are called which are not in jqLite)

This dependency on jQuery is not listed in bower.json

I would like to be able to double-click a draggable item without the drag function taking effect.

I would like to be able to double-click a draggable item without the drag function taking effect.

Right now, when I double-click an item, the next item in my "repeat" sequence immediately
takes the position of the clicked item. I would like this to happen on drag, not on click.
I managed to fix this by removing the row 96 from ngDraggable.js, namely "moveElement(_tx, _ty);".

Can you add the option of not initializing dragging without moving or at least not until the drag is prolonged?

Bower support for ngDraggable

Hi,

I'd kindly ask for Bower support for ngDraggable, if possible. Do you actually have any plans for that already?

Best regards,
Frank

How do I get the mouse location on drag start and drop?

Currently I am doing something like:

$scope.afterMove = function(item, event) {
console.log('afterMove:',event);
}

$scope.beforeMove = function(item, event) {
console.log('beforeMove:',event);
}

The events are objects and not events though. They do not contain event.clientX or event.clientY or anything like that. How do I get the drag start and drop end location?

Drop not working for div that extends beyond min-height

<div ng-drop="true" style="min-height:100px"><code></div>
The height of my div changes when content pushes the height of div beyond the min-height as set originally. The drop area for ng-drop is however is still calculated based on original area.

How to rightly detect drop area with changing div height?

How to access the DOM element in ng-drop-success

Unable to get a reference to the DOM element where the item is dropped. In the ng-drop-success event handler I am unable to get event.target. Am I missing something?
Thank you.

Do not minimize javascript in demo pages

As it is, it's not possible to simply view source

Unintuitive drag anchor

Dragged elements always centre on the cursor which seems unintuitive to me because it causes elements to jump. I think it would be smoother if your anchor point is wherever you clicked on the element. I've modified it to behave that way, is this a change I can contribute to the project or is there a reason you wouldn't want this behaviour.

Sorry if this is the wrong place to suggest an addition, I've never contributed to another's project before.

Reorder doesn't work

When I want to reorder items, the drop area doesn't have the 'drag-over' class and ng-drop-success isnt launched.

dragged element visually constrained to scrollable container

There appears to be an issue when dragging an element within a scrollable container. Here is an example http://codepen.io/jfspencer/pen/jEPGGm . When actively dragging, the element is constrained to its originating scroll region. hovering over the right and left swipe panels registers with the plugin but the UI element is not visible.

I have tried forcing an absolute position with the .dragging class and setting a high z-index.

side note: touch delay is set to 500ms.

Feature Request - Change Order

It would be nice to be able to drag items within a drop target to change their order

Define a version

Hello! I'm trying to add this module to the Rails Assets library (https://rails-assets.org) so I can use it without Bower, but it needs a version defined. Could you please release a version?

iOS 8

Is it working in iOS 8 ?

ng-cancel-drag inheritance

I've got dynamic contents inside my draggable elements, and i don't want them to be an anchor for drags ... is it natively possible , or does it need an enhancement to propagate ng-cancel-drag to their child html tags ?

drag-over work incorrect with multiple drop zones

Hello,

'drag-over' class appear only if draggable object over the last drop zone.

It reproduces in your example http://htmlpreview.github.io/?https://github.com/fatlinesofcode/ngDraggable/blob/master/example.html . If draggable object over drop area 2 'drag-over' class is appear, otherwise it doesn't.

Problems in combination with famo.us/angular

Just found this library and it is exactly what I am looking for. However when I integrate it in my famo.us/angular project it gets somehow totally messed up.
Created that very simple Codepen here to demonstrate it:
http://codepen.io/anon/pen/XJRXYg

Does anybody know what causes that? And how I can fix it?

Containing div with overflow:hidden

Howdy,

I am using ngDraggable on a child div inside a parent div. The parent div has position:relative and overflow:hidden. Unfortunately ngDraggable applies a position:fixed style to the child div, making the overflow:hidden not work when dragging. Thus if I drop the child div so that the half of it lies outside the parent div and half of it lies inside the parent div, half of the child div is hidden. When I begin dragging the div though, it reappears. Is there a way to make the solution use position:absolute instead of position:fixed to prevent this problem?

Thanks!

click != drag

The click event should not trigger the drag event. I should be able to have a div which is clickable but also draggable. See Trello as a good example of this.

The only option I've been able to find is adding a nested, clickable element within a draggable div. This is a much less than desirable UX and rather unintuitive.

Bower Support

bower install
bower ngDraggable#^0.0.0 not-cached git://github.com/fatlinesofcode/ngDraggable.git#^0.0.0
bower ngDraggable#^0.0.0 resolve git://github.com/fatlinesofcode/ngDraggable.git#^0.0.0
bower ngDraggable#^0.0.0 ENORESTARGET No tag found that was able to satisfy ^0.0.0

"dependencies": {
"ngDraggable": "^0.0.0"
}

form elements uneditable in draggable container

I noticed that form elements are un-editable in draggable containers. Not sure if it is by design or because of html5 restriction or an actual bug?

Multiple objects with ngDraggableClone

I have multiple draggable objects on a page, but only one of them uses clone. The problem is that the cloned object appears for either object that I choose to drag. How can I limit the clone to appear for only my specific draggable target?

Add ngDragMove callback

I have downloaded this plugin (awesome job, btw) and added ngDragMove callback. I believe this should be in the plugin. Can I submit a PR for that?

Cancel Drag Event

It can be useful for un-setting styles when the user cancel the drag.

Error on mobile dragging

When I was testing on touch devices, drag do not works. Then I try to debug and on console is show the following error:
[Error] TypeError: undefined is not an object (evaluating 'evt.touches[0]')
onlongpress (ngDraggable.js, line 118)
(anonymous function) (ngDraggable.js, line 95)
Is there any solution?

Disable the drag on a specific element

While the plugin works great, there are some élements that I don't want the drag on (When using a scroll bar inside a draggable, when clicking on a button etc....)

I did a 'hack' to disable the drag depending on the event of the sub element, the class etc..... and put it into the onpress.

I was wondering if there was a better way; if you have a plan to add this or should I do a PR for my code ?

Scrolling the page while dragging

Sometimes the drop zone is further down the page and requires being scrolled to. When dragging something from the top region of the page, it's impossible to scroll while dragging unless you have a scroll wheel.

Anyone have suggestions on how we can add the ability to get the page to scroll when dragging the object to the bottom?