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

Question

我想通过在我的 Angular 网站中拖动它们来使一些图像可排序，我正在尝试使用 angular-sortable-view. The 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。

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

Answer 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

Answer 2

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

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

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

How to use angular-sortable-view in my Angular code?

javascript

sorting

drag

jquery-ui-sortable

angularjs