【问题标题】:AngularJS: angular-drag-and-drop-lists dnd-allowed-types not evaluating to true for matching dnd-typeAngularJS:angular-drag-and-drop-lists dnd-allowed-types 未评估为 true 以匹配 dnd-type
【发布时间】:2016-10-13 07:49:40
【问题描述】:

我目前正在使用angular-drag-and-drop-lists 来生成 JsonDTO 对象。从 JSON 生成图形表示可以正常工作。通过拖放不同的元素来生成 JSON 也可以正常工作。我主要使用nested list tutorial 来设置初始列表并设置按钮以从中拖动新元素。但是,这仅在我尝试将 dnd-type 添加到 li-elements 并将 dnd-allowed-type 添加到 ul-elements 之前有效。使用这些类型是一项要求,因为我想用那个“编辑器”创建的 Json 中有一定的子元素层次结构。

在下面找到一些代码 sn-ps 我是如何实现它的。如果您需要更多信息,请告诉我。如果有人能帮助我解决这个问题,我将不胜感激

我想在其中插入一些东西的列表:

<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>

【问题讨论】:

    标签: javascript angularjs drag-and-drop angulardraganddroplists


    【解决方案1】:

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

    <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 类型,因为我查看的示例代码中没有使用它。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-12-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-10-18
      • 2023-02-16
      • 1970-01-01
      • 2016-05-03
      相关资源
      最近更新 更多