使用第三方 UI 组件作为 angularJS 指令答案

【问题标题】：Using third party UI component as angularJS directive使用第三方 UI 组件作为 angularJS 指令
【发布时间】：2020-04-22 20:55:46
【问题描述】：

有一个名为 smooth-dnd 的 npm 包。这是它的 github 仓库： https://github.com/kutlugsahin/smooth-dnd#readme 该包可以安装在 react、angular 和 vue.js 中。但是我的项目是在 angularjs 中。我是这类问题的新手，所以关于如何通过创建我自己的指令将这个 npm 包添加到我的 angularjs 项目的任何建议。

【问题讨论】：

检查 npm 包是否安装检查你项目中的 package.json 文件。 Package.json 显示您已安装的所有依赖项。要使用 smooth-dnd 首先安装它并创建一个 div 标签分配 id 然后在 .ts 文件中调用该 id。您提到的 Github 存储库显示了如何使用它。
@AwareFun 是的，但我无法安装它，因为我的项目在 angularjs 中。我必须创建一个指令并在其中填充 github repo 的适当代码。由于 repo 很大，我应该如何解决这个问题。
在 github 仓库中，他们有 npm 模块。 github.com/kutlugsahin/ngx-smooth-dnd
@AwareFun 是的，但我想要 angularjs 而不是 angular

标签： angularjs github npm angularjs-directive drag-and-drop

【解决方案1】：

如果你不需要专门使用这个库，而是需要实现拖放功能，我推荐andular-drag-n-drop-lists，它已经有 angularjs 包装器。

我在我的一个项目中使用了它，效果很好。

用法很简单：

<ul class="b-statuses-list" dnd-list="vm.leadStatusList">
    <li class="b-unit-status -type_draggable"
    ng-repeat="status in vm.leadStatusList"
    dnd-moved="vm.leadStatusList.splice($index, 1)"
    dnd-dragend="vm.onUpdateOrderLeadStatus()"
    dnd-draggable="status"
    dnd-effect-allowed="move">
        ...
    </li>
</ul>

【讨论】：