在更改更新图像位置json时带角

Question

我坚持我的项目，我把希望寄托在你们身上，告诉我如何进一步行动。 目前我的代码允许向左或向右拖放图像。这应该定义图像位置。现在我不知道如何制作一个可以更新json中图像位置的功能。让我告诉你我的代码，我会进一步解释

这是我从服务器获取的图像响应。

[{"id_image":0,"thumbImage":"http://lorempixel.com/242/242/?52704","image":"http://lorempixel.com/1024/768/?37489","position":0},
{"id_image":1,"thumbImage":"http://lorempixel.com/242/242/?20352","image":"http://lorempixel.com/1024/768/?89352","position":1},
{"id_image":2,"thumbImage":"http://lorempixel.com/242/242/?27924","image":"http://lorempixel.com/1024/768/?45708","position":2},
{"id_image":3,"thumbImage":"http://lorempixel.com/242/242/?45140","image":"http://lorempixel.com/1024/768/?88511","position":3},
{"id_image":4,"thumbImage":"http://lorempixel.com/242/242/?10979","image":"http://lorempixel.com/1024/768/?98296","position":4}]

这是我的HTML，它显示并允许向左或向右拖放图像

<form>
  {{images}}
  <div class="row clearfix">
      <div ui:sortable ng:model="images" id="main" style="overflow:auto;">
         <div  ng:repeat="i in images track by $index" id="editProductImages">
            <figure class="d_xs_inline_b">
                <div>
                  <img src="{{i.thumbImage}}" alt="{{product[0].name}}">
                </div>
            </figure>
         </div>
     </div>
   </div>
</form>

我还添加了一些JQuery来使make工作，因为整个模板已经用JQuery编写了

//Sort product images
$(function() {
    $('#editProductImages').sortable({
        connectWith: '#main',
        scroll : false
    });
});

这就是我的项目目前的样子

现在这是我的控制器功能

productsFactory.getProduct(alias).then(function(data){
    //Fetch product data
    $scope.product = data;
    //Fetch images
    $scope.images = data[0].images;
})
    //Sort images function, how??
    $scope.updateImagePosition = function(){

    }

问题是我不想让用户按下任何提交按钮。当用户向左或向右移动任何图像时，我不会立即发生这种情况。我希望你们能帮助我。如果您需要任何其他信息，请告诉我，我将提供

Answer 1

您可以使用update的{​​{1}}属性。我在这里展示了它是如何工作的。您可以对其进行编辑以更改您拥有的JSON。如下面的代码所示，这也可以在角度上工作！

sortable

var app = angular.module("myapp", []);
app.controller("c", function($scope) {
  $("#sortable1").sortable({
    connectWith: ".connectedSortable",
    change: function(event, ui) {
      $(this).attr('data-previndex', ui.item.index());
    },
    update: function(event, ui) {
      var start_pos = $(this).attr('data-previndex');
      var index = ui.item.index() + 1;
      var text = ui.item.text();

      $(this).removeAttr('data-previndex');
      $("#msg").append(text + " moved from " + start_pos + " to " + index + "</br>");
    }
  }).disableSelection();
});

#sortable1,
#sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}
#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}