is it possible to allow category to drop only on categories dropzone and not in services dropzone, with the following code ?

<ul class="categories" data-dnd-list="categories">
    <li
        class="category"
        data-ng-repeat="category in categories"
        data-dnd-draggable="category"
        data-dnd-effect-allowed="move"
        data-dnd-moved="categories.splice($index, 1)"
    >
        <span>
            [[ category.name ]]
        </span>

        <ul class="services" data-dnd-list="category.services">
            <li
                class="service"
                data-ng-repeat="service in category.services"
                data-dnd-draggable="service"
                data-dnd-effect-allowed="move"
                data-dnd-moved="category.services.splice($index, 1)"
            >
                <span>
                    [[ service.name ]]
                </span>
            </li>
        </ul>
    </li>
</ul>

Hi there and thanks for making this great directive.

I noticed that I can drop items on the browser's address bar and in Chrome this redirects the user away from your page.
Firefox and IE behave a little better - you can still drop on the address bar, but they won't redirect the user.

I had a look at angular-ui-tree and it does not allow you to drop on the address bar. In fact it looks like you can't drag items out of the viewport at all.

It would be great if the drop event was cancelled if the user (accidentally) drops on the address bar.

Thanks

I noticed I got some very tricky behaviour involving duplicates if I used an array of strings like so,

['a','b','c'];

The problem went away when I used object literals:

[{a:'a'},{b:'b'},{c:'c'}]

It might make sense for the library to throw an error if it detects that a member of an array it is using is not an object.

Let's say that I have 2 lists: I can drag an element from the first and drop it on the second list.

I would like to invoke a callback when an element is dragged from the first list but then it is dropped not on the second list, but on an external element (neither list1, neither list 2).

Apparently there actually is no such event, right?

All of the below was produced on the 30th Nov 2014 build.
I added a console log to output the value returned by the getPlaceholderIndex() function.
I used chrome dev tools to modify the script served from gh-pages.

indexOf returns a zero-based index of the array. At first glance this function returns a one-based index. However I have came across a few inconsistencies

1. Moving the last item to the same position returns the wrong index
Moving the last item actually returns a zero-based index.

2. Moving an item to the same position gives different results
Note that the placeholder for both drops is in the same position but the index is different.

3. Moving an item up gives a zero-based index, moving down gives one-based index

Anyone with these issues can make a short term fix by checking if:

• the item is being moved down the list (a higher getPlaceholderIndex() value)
• the item being moved is not the last item in the list

simply -1 from the value to return a zero-based index. This should fix issues 1 and 3.

Hello,

First of all, thank you for your wonderful directive. Just wondering any plans to make it work in conjunction with draggable elements. Something like jQuery already has. http://jqueryui.com/draggable/#sortable

Thank you.

Wondering if it would be possible to implement multi-drag and drop. Since the select is already there, could it keep track of the items selected?

In FireFox placeholder never shown in first place, and its impossible to drag item to there.
(talking about horizontal mode - http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced try it in FF)
Any ideas?!

Hi,

Is it possible to specify a part or an area to maintain for dragging not anywhere ?

hello,
great plugin
can you add a handle to items
looks like http://jimliu.github.io/angular-ui-tree/trees.html in the "Tree 2" block

Thanks

I use jQuery on my website and want to use your library, but it's not work because jQuery catch events and wrap event object in a new jQuery.Event object.

In your directive, you try to access to event.dataTranser but it doesn't exist.
With jQuery, you must access to event.originalEvent.dataTransfer.

You could test if event object is an instance of jQuery.Event and get original event from event.originalEvent.
Or you could test if event.dataTransfer exists and, if not, try to get event.originalEvent.
Both solutions seems to me very dirty and specifically to jQuery... but I don't see an other clean solution. Do you ?

When I'm dragging a tab in a horizontal list of tabs, instead of adding a placeholder tab within the list of tabs, dnd adds an li bullet above or below the list of tabs, which add the tab to either the front of the list or the second position in the list. Has anyone encountered this? What is creating those bullet points when I don't have an li involved at all? Thanks.
I'm using angular bootstrap tabs.
Here's the mockup:

 tabset class="tab-container" dnd-list="layout.tabs">
        <tab
             ng-repeat="tab in layout.tabs"
             active="tab.active"
             dnd-draggable="tab"
             dnd-moved="layout.tabs.splice($index, 1)"
             dnd-effect-allowed="move"
             dnd-selected="layout.tabs.selected = tab"
             tab-highlight>
            <tab-heading id="tab-draggable">
                <span>{{tab.title}}</span> <i class="glyphicon glyphicon-remove" ng-click="removeTab($event, $index)"></i>
            </tab-heading> 

Hi Is there any plans of making this touch enabled? For usage in iOS and Android?

Hello, I observed that the items are sometimes missing after drop into a different list from its parent. Could some one help me resolving it.

In other browsers than Chrome the browser window will not start to scroll when you reach the border of the browser window with an dragged element at you mousepointer.

There is an implementation for the standard jquery DnD implementation which might give some hints about how to implement this behaviour.

https://github.com/martindrapeau/jQueryDndPageScroll

I have a use case where I would like to accept drops from external sources. Can a "dnd-external-allowed" attribute be created to allow this?

Hi - Great module.
This is really more of a feature request. It would be great to specify a maximum depth for nested elements, and reject drops exceeding those limits.

I'm having problems with nested items. In my example they are always allowed. Because of the dnd-allowed-types on the child dnd-list, a block element shouldn't be added to a layout element. It happens anyway though, because of the parent dnd-allowed-types interference?

Example:
http://codepen.io/baaaaas/pen/fcdlA?editors=101

I tried:

• Adding pointer-events:none on the parent-list while dragging over child-list
• Empty value of dnd-allowed-types on parent-list while dragging over child-list

Dirty fix in directive while adding dropped element:
if(element.hasClass("blocks") && transferredObject.type == "layout"){
gridArray.splice(placeholderIndex, 0, transferredObject);
} else {
targetArray.splice(placeholderIndex, 0, transferredObject);
}

Please help, I don't want to use the dirty fix.

Thanks for your work. This is not a issue.

Hi,
thanks for this great plugin!

In the nested list example, I am having a little trouble dropping items into a container that has several items on the left column for instance, and none on the right - the drop placeholder starts alternating between the correct place for the item I am trying to drop, and the drop zone above the container making it very hard to drop it. Any thoughts on how to fix this?

Here are steps to reproduce the problem (I am using latest Chrome) - in Dropzone A, start dragging Item 3 out of its place and then try to drop it back in the sample spot.

Thanks

Drag and drop is not working in the ipad and Mobile devices. What should I do to make it work?

Other implementations of DnD in Angular have a callback that's executed on the list you've moved the item. Example: ng-drag-success="onDragComplete($data, $event)" in ngDraggable.

I'm sure this must be possible but I'm not sure how to go about it. Basically I need to know where which list my list item was dragged to as well as either the data or index.

@marceljuenemann any insight?

Hi!
I use code similar to advanced demo.
But I need to add new items only to the end of the List.
How can i implement this?

In IE9 if you drag any element and drop it outside drop area then it will disappear from the list. Like if it is been removed from the array.

Try this demo URL in IE9 http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

I have a problem with this module that I have tryed to explain here:
http://stackoverflow.com/questions/30531007/angularjs-didnt-update-next-hashkey-when-using-angular-drag-and-drop-lists

I have a DND enabled list consisting of images I want our users to be able to sort with the drag and drop functionality. The problem is that I have some input (Description, type, etc) for the user to populate in each of these elements (IE: They each have a remove|edit button).

I can't click on these buttons I imagine because of the way dnd-selected works (I'll have to take a deeper dive). Any help on how to solve this would be appreciated.

It would be really helpful to have a couple more callbacks such as:

• Drag Start ( when an item was starting to be dragged )
• Drag Over ( when an item is over a list )
• Dropped ( when an item was dropped on a list )

I've done these locally and they work great, I'll do a PR for main repo.

This is a question.
I am using nested demo. I want to delete a perticular item from the list.
And i will be having 1 button for delete?

How can we delete a single item?

marceljuenemann, thanks for these directives, It's powerful.

Could you add the behaviour for horizontal drag and drop on one of your next releases, please?

cheers :)

For some reason it just does nothing.

I can click & hold, but when I release, the item go back to its original position.

Working well on chrome & firefox.

Any idea?

When I move an element, I can move it in any place in the list except the first one.

Right now Columns is of the structure [ [ ], [ ] ], but I would rather have it as [ ] since I want a container to have only one child. How would I go about with this? Is this possible in the current implementation?

The selection of draggable elements does not belong here in my opinion. It doesn't seem to do anything that can't be done with a simple ng-click instead. Am I overlooking something?

I propose it should be removed (for 2.0 as it'd be a breaking change). What do you think?

Maybe not a bug but I don't know how to get around it. When you remove an item from your list using: "dnd-moved="list.splice($index, 1)" you loose your scope and cannot get hold of $parent or use the scope to emit an event. I wanted to add a hook, dnd-dragend, when the model is updated without the placeholder and emit an event up the chain to my controller to save the model.

testevent 2 will never reach my controller.

            // Invoke callbacks
            scope.$emit('testevent', '1')
            scope.$apply(function() {
                switch (dropEffect) {
                    case "move":
                        $parse(attr.dndMoved)(scope);
                        break;

                    case "copy":
                        $parse(attr.dndCopied)(scope);
                        break;
                }
            });

            scope.$emit('testevent', '2');

In all the demos when you double click with IE9 the Element will be deleted.
http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested

The problem is that the dragstart event will be fired on a doubleclick. Then it starts to drag and just disappears.

I looked at the code but couldnt find it yet. If i find it I will post it here

Greetings
Jannis

I'm really impressed with this library and would like to use it in my project. I'm new to angular and I an having an issue making input tag elements editable with the angular-drag-and-drop-list. In the nested list example, I have an input textarea in the item.html template. It is by default non-editable. Is it possible to make it editable.

Regards,
Karthic

@marceljuenemann this is a great lib. I've used all those available and yours is definitely the most well thought out and intuitive. Thanks.

I'm trying to set the following styles on the dndDragging class but they seem to be overridden no matter what I do:

cursor: grabbing
cursor: -webkit-grabbing

Thoughts?

I have put a text form in each element in the list. When i select the list element itself, it can be dragged as expected. However, when i want to select the text inside the text form (inside the list element) it cause the drag effect instead of selecting the text. How can i disable drag effect when i click text form?

To recreate:

1. Go to http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced
2. Drag items 10–16 out of their container and into any other
3. Try to drag anything into the (now empty) container that previously had items 10–16
4. Witness nothing is droppable there anymore. You can't ever put anything back into that (now empty) container.

Does your api for callback provide info on things like previous parent, new parent, position within siblings?

I have the same problem in my project, so your solution would be really helpfull. So, I have one ask for you: Could you maybe show a sample code of usage this? Especially usage of dndDropZone?

This is my case:

1. I have a menu tree with 2 level (containers), top level limited 3 parents, each item has child with 5 limited.
2. I using 'dragoverCallback' to track back item should or should not drop intro the container.
3. I send current drag area's 'list' intro dragover callback as param
4. When try drag a parent into children area already full, the call back got correct report, but still can
   drop in. (there is no placeholder showing up anymore) which mean is I can still drop in even the placeholder is disappear away and the console.log report is confirmed.
5. I had to have use a global key pass to dropCallback make sure the it's able to drop in.

The point, I believe it's not suppose doing that way, if dragover tell not droping, should not droping.
it's looks like try to droping but not able to then rollback to some how.

[edit - I tried removing an item on dragstart to get around the duplicate item issue, and submitted this issue prior to really working with it and discovering some flaws. The root issue is that the example model for using drag & drop with lists doesn't work with lists which are tracked by $index, as is the suggested solution for lists with duplicate items in them.]

If you remove an item on dragstart, that item doesn't stay displayed in the list while you drag. It also removes it correctly in both the standard "ng-repeat x in y" and "ng-repeat x in y track by $index".

The second example is what angular's error page tells you to try if you ever try to ng-repeat something with duplicate entries.

I'm combining this directive with another jQuery library for selecting multiple items at once (via ctrl+click, shift+click etc. See https://evulse.github.io/finderSelect for example).

Is there a straight-forward way for telling dndLists to grab all other items that are currently decorated with a particular css class or json object property ? The idea is I should be able to click on any number of child items in my list of draggables to highlight them, and as I drag any one highlighted item, all highlighted items are dragged with it.

FYI I'm using dnd-draggable inside an li with ng-repeat.

Any help would be greatly appreciated. Thanks!

When move items from down to up, for example move last item to the first, then on callback index gives 0. So I understood that, the items ordered based on zero based index..

When I move first element to second place, then on callback the index should be 1. But on callback I am getting 2 instead of 1 for index.

Do I need to add anything to resolve this issue ?

Hi, i'm come across your project and it fit my need perfectly, but i'm using Python Flask as my back-end, will it need some additional dependencies? Thank you.

1. Can we tilt the item being dragged little.
   http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform
2. Find the height of item being dragged and set the height of dndplaceholder accordingly.

Hello All,

Great job for the dnd list ! It looks awesome. I am facing a new problem... Where I need your help :

When I drag 2 to 0 I have :

• 0 another test
• 1 test
• 2 another test

Kind of weird, isn't it ?
Where could this come from ?

Regards,
Rémi

Great plugin