i'm stuck on project , i'm putting hopes on guys, tell me how move further. code allows drag , drop images left or right. should define image positions. don't know how make function update image position in json. let me show code , explain further
this response server images.
[{"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}] and html shows , allows dragging , dropping images left or right
<form> {{images}} <div class="row clearfix"> <div ui:sortable ng:model="images" id="main" style="overflow:auto;"> <div ng:repeat="i in images track $index" id="editproductimages"> <figure class="d_xs_inline_b"> <div> <img src="{{i.thumbimage}}" alt="{{product[0].name}}"> </div> </figure> </div> </div> </div> </form> i added little bit of jquery make make working since whole template written in jquery
//sort product images $(function() { $('#editproductimages').sortable({ connectwith: '#main', scroll : false }); }); and how project looks 
and controller functions now
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(){ } the problem don't wan't users press submit buttons ever. wan't happen instantaneously when ever user moves of image left or right. hope guys can me. if need additional information, please let me know , provide
you can use update attribute of sortable. have shown how works here. can edit change json have. , in below code, work in angular too!
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 " + start_pos + " " + 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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <body ng-app="myapp" ng-controller="c"> <ul id="sortable1" class="connectedsortable"> <li class="ui-state-default">item 1</li> <li class="ui-state-default">item 2</li> <li class="ui-state-default">item 3</li> <li class="ui-state-default">item 4</li> <li class="ui-state-default">item 5</li> </ul> <p id="msg"></p> </body>
Comments
Post a Comment