SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.79k stars 3.7k forks source link

SORTABLE JS SAVE IMAGE BLOB URL #2217

Open ArdaOtong opened 2 years ago

ArdaOtong commented 2 years ago

Hi, I am using angular 4 and sortable js to drag pictures,

I have 2 pictures, picture A and B, when I move picture B to the first pic and A as the second pic, when I hit save, the picture won't save as what I moved them, it reset to their original position ,

this is the HTML : `

        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 p-10" style="display: flex;flex-direction:column;text-align:right" ng-repeat="imgsrc in imageBlobUrl"
             ng-if="!!!imgsrc.toUpperCase().includes('.VID') && !!!imgsrc.toUpperCase().includes('.MOV') && !!!imgsrc.toUpperCase().includes('.MP4') && !!!imgsrc.toUpperCase().includes('.MPEG')">
            <i class="zmdi zmdi-close pull-right" style="top:0;right:0" ng-click="removeImg($index)"></i>
            <img draggable="false" ng-src="{{imgsrc}}" class="img-responsive" style="width: 90%;" />

        </div>
    </div>`

    this is the js part :

    ` Sortable.create(imageId, {

            group: "image-list",
            options: {
                animation: 100
            },
            store: {
                get: function(sortable) {
                  var order = localStorage.getItem(sortable.options.group.name);
                  return order ? order.split("|") : [];
                },
                set: function(sortable) {
                  var order = sortable.toArray();
                  localStorage.setItem(sortable.options.group.name, order.join("|"));
                }
            }
        });`

        and I tried to save it through the $scope.imageBlobUrl, I tried to get only the link of the image but I found no way to get it 

        Thanks