如何在我的 Angular 代码中使用 angular-sortable-view？答案

【问题标题】：How to use angular-sortable-view in my Angular code?如何在我的 Angular 代码中使用 angular-sortable-view？
【发布时间】：2015-11-19 15:56:57
【问题描述】：

我想通过在我尝试使用 angular-sortable-view 的 Angular 网站中拖动它们来使一些图像可排序。 demos look really good，但我无法让它在我自己的代码中工作，而且我没有收到任何错误。

我的控制器中定义了一个简单的列表：

$scope.prop = {};
$scope.prop.images = [
    {id: 'http://www.adiumxtras.com/images/thumbs/dango_status_icon_set_7_19047_6248_thumb.png'},
    {id: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Red_information_icon_with_gradient_background.svg/48px-Red_information_icon_with_gradient_background.svg.png'},
    {id: 'https://www.haiku-os.org/docs/userguide/images/apps-images/icon-o-matic-icon_64.png'},
];

我的 html 如下所示：

<div sv-root sv-part="prop.images">
    <div ng-repeat="image in prop.images" sv-element>
        <img src="{{ image.id }}">
    </div>
</div>

我发了a plunker here。

有人知道我做错了什么吗？欢迎所有提示！

【问题讨论】：

标签： javascript angularjs sorting jquery-ui-sortable drag

【解决方案1】：

这里有几个问题。首先是 angular-sortable-view 是一个单独的模块，您需要将其添加到您的应用程序中：

angular.module('sort', ['angular-sortable-view'])

除此之外，由于图像可以在浏览器中拖动，您必须禁用它：

<img draggable="false" ng-src="{{photo.id}}" />

在此处查看分叉的 plunkr：http://plnkr.co/edit/i8Z8jJGnJoGFgTMFej4Q?p=preview

【讨论】：

【解决方案2】：

根据https://github.com/kamilkp/angular-sortable-view对图片进行排序需要给图片添加draggable="false"属性：

<img draggable="false" ng-src="{{image.id}}">

【讨论】：