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

Question

I'm want to make some images sortable by dragging them around in my Angular website for which I'm trying to use angular-sortable-view. The demos look really good, but I just can't get it to work in my own code and I get no error whatsoever.

I've got a simple list defined in my controller:

$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'},
];

and my html looks as follows:

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

I made a plunker here.

Does anybody know what I'm doing wrong? All tips are welcome!

Rob Louie · Accepted Answer · 2015-08-25 20:59:59Z

4

You've got a couple problems here. The first being that angular-sortable-view is a separate module which you need to add to your app:

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

In addition to that, since images are draggable in the browser, you must disable that:

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

Check the forked plunkr here: http://plnkr.co/edit/i8Z8jJGnJoGFgTMFej4Q?p=preview

answered Aug 25, 2015 at 20:59

Rob Louie

2,6911 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Uliana Pavelko · Accepted Answer · 2016-03-10 17:05:55Z

1

According to https://github.com/kamilkp/angular-sortable-view to sort images you need to add draggable="false" atribute to your image:

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

answered Mar 10, 2016 at 17:05

Uliana Pavelko

2,9821 gold badge32 silver badges33 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related