Suggestions on ordering an array of images

Design
1

I have an array of images that I display on a page using an each loop. I’ve enable drag and drop to arrange the order of the images but it doesn’t appear to be updating the model. I’ve tried adding a textbox that holds the images position and updating it on drop using jQuery but it still doesn’t update the model.

Am I doing this incorrectly? Is there a better way to display the images where they are bound properly so when I make a change to them it persists on a save?

{{#each gallery}}
    <a href="#" {{action 'showEditGallery' 'add-image' this}}>
        <li draggable="true" class='col-md-4 col-sm-6 col-xs-12 image-responsive' style="background-image: url('{{unbound src.small}}');">
            <div style="text-align: center; width: 100%; height: 100%;">
                <strong style="font-size: small; color: #FFF; text-shadow: 2px 2px 2px #000; position: relative; top: -135px;">{{title}}</strong>
                {{input type="text" class="form-control position" id=_id name=_id value=meta.position}}
            </div>
        </li>
    </a>
{{/each}}

I have this in my controller to update the value but it only updates the visible value of the rendered textbox, not the actual DOM value.

var count = 0;
			Ember.$('#sortable2').find('input').each(function() {
				Ember.$(this).css('position', 'relative').css('top', '-260px');
				Ember.$(this).val(count);

				count++;
			});

Partial of json:

"gallery" : [
            {
                    "title" : "First Image",
                    "description" : "Welcome",
                    "_id" : ObjectId("53dc0aedde4be108724cd761"),
                    "meta" : {
                            "position" : 0
                    },
                    "src" : {
                            "small" : "http://localhost/image_gallery_000_sm.jpg",
                            "medium" : "http://localhost/image_gallery_000_md.jpg",
                            "large" : "http://localhost/image_gallery_000.jpg"
                    }
            },
            {
                    "title" : "Second Image",
                    "description" : "Pool",
                    "_id" : ObjectId("53dc0aedde4be108724cd762"),
                    "meta" : {
                            "position" : 1
                    },
                    "src" : {
                            "small" : "http://localhost/image_gallery_001_sm.jpg",
                            "medium" : "http://localhost/image_gallery_001_md.jpg",
                            "large" : "http://localhost/image_gallery_001.jpg"
                    }
            },
            {
                    "title" : "Third Image",
                    "description" : "flooring",
                    "_id" : ObjectId("53dc0aedde4be108724cd763"),
                    "meta" : {
                            "position" : 2
                    },
                    "src" : {
                            "small" : "http://localhost/image_gallery_002_sm.jpg",
                            "medium" : "http://localhost/image_gallery_002_md.jpg",
                            "large" : "http://localhost/image_gallery_002.jpg"
                    }
            },
            {
                    "title" : "Fourth Image",
                    "description" : "countertops",
                    "_id" : ObjectId("53dc0aedde4be108724cd764"),
                    "meta" : {
                            "position" : 3
                    },
                    "src" : {
                            "small" : "http://localhost/image_gallery_003_sm.jpg",
                            "medium" : "http://localhost/image_gallery_003_md.jpg",
                            "large" : "http://localhost/image_gallery_003.jpg"
                    }
            },
            {
                    "title" : "Fifth Image",
                    "description" : "cabinet",
                    "_id" : ObjectId("53dc0aedde4be108724cd765"),
                    "meta" : {
                            "position" : 4
                    },
                    "src" : {
                            "small" : "http://localhost/image_gallery_004_sm.jpg",
                            "medium" : "http://localhost/image_gallery_004_md.jpg",
                            "large" : "localhost/image_gallery_004.jpg"
                    }
            },
            {
                    "title" : "Sixth Image",
                    "description" : "books",
                    "_id" : ObjectId("53dc0aedde4be108724cd766"),
                    "meta" : {
                            "position" : 5
                    },
                    "src" : {
                            "small" : "http://localhost/image_gallery_005_sm.jpg",
                            "medium" : "http://localhost/image_gallery_005_md.jpg",
                            "large" : "http://localhost/image_gallery_005.jpg"
                    }
            }]
1 Like