AngularJS: angular-拖放列表dnd-allowed-types在匹配dnd-type时不会求值为tru

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

本文关键字：tru dnd-type 拖放 angular- 列表 dnd-allowed-types AngularJS      更新时间：2023-09-26

我目前正在使用角拖放列表来生成JsonDTO对象。从JSON生成图形表示很好。通过拖放不同的元素来生成JSON也很好。我主要使用嵌套列表教程来设置初始列表和设置拖动新元素的按钮。然而，这只工作，直到我尝试添加dnd-type到li-elements和dnd-allowed-type到ul-elements。使用这些类型是必需的，因为我想用'编辑器'创建的Json中有一定的子元素层次结构。

找到下面的一些代码片段我是如何实现它的。如果你需要进一步的信息，请告诉我。如果有人能帮我解决这个问题，我将非常感激。

我想要插入的列表:

<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="models.questionnaire.name">
</div>
<ul dnd-list="models.questionnaire.pages"
    dnd-allowed-types="models.allowedTypes.questionnaire">
    <li ng-repeat="page in models.questionnaire.pages"
        dnd-draggable="page"
        dnd-type="page.type"
        dnd-effect-allowed="move"
        dnd-moved="models.questionnaire.pages.splice($index, 1)"
        dnd-selected="models.selected = page"
        ng-class="{'selected': models.selected === page}"
        ng-include="'page.html'">
    </li>
</ul>

从

拖动新页面的按钮。
<li dnd-draggable="{title: 'title', dndType: 'page', sections: []}"
            dnd-effect-allowed="copy">
            <button type="button" class="btn btn-default btn-lg" disabled="disabled">Page</button>
        </li>

如果有人有同样的问题，这是我的解决方案按钮拖动页面:

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

在我的例子中，我忘记设置dnd-type，因为我看到的示例代码中没有使用它。

相关文章：