LST LST - 9 months ago 68
AngularJS Question

AngularJS: angular-drag-and-drop-lists dnd-allowed-types not evaluating to true for matching dnd-type

I am currently using angular-drag-and-drop-lists to generate a JsonDTO Object. Generating the graphical representation from a JSON works fine. And generating a JSON by dragging and dropping the different elements works fine as well. I mainly used the nested list tutorial to set up the initial list and setting up the buttons to drag new elements from. However this only works until I try to add dnd-type to the li-elements and dnd-allowed-type to the ul-elements. Using those types is a requirements, as there is a certain hierarchical structure of subelements in the Json I want to create with that 'editor'.

Find below some code snippets how I implemented it. If you need further information let me know. I would really appreciate if anyone could help me with this issue

THe list I want to inset something into:

<div class="form-group label-floating">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" class="form-control" id="name" ng-model="">
<ul dnd-list="models.questionnaire.pages"
<li ng-repeat="page in models.questionnaire.pages"
dnd-moved="models.questionnaire.pages.splice($index, 1)"
dnd-selected="models.selected = page"
ng-class="{'selected': models.selected === page}"

The button to drag a new page from:

<li dnd-draggable="{title: 'title', dndType: 'page', sections: []}"
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Page</button>

Answer Source

In case anyone has the same question, that is my solution for the button to drag the page from:

<li dnd-draggable="{title: 'title', sections: []}"
            <button type="button" class="btn btn-default btn-lg" disabled="disabled">Page</button>


In my case I forgot to set the dnd-type, as it was not used in the example code I looked at.