CODEWITHSUNDEEP
javascriptangularjssortingjquery-ui-sortabledrag
kramer65
kramer65

Reputation: 54013

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

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!

Upvotes: 1

Views: 2993

Answers (2)

Uliana Pavelko
Uliana Pavelko

Reputation: 2952

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

Upvotes: 1

Rob Louie
Rob Louie

Reputation: 2681

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

Upvotes: 4

Related Questions