Support horizontal mode

[minhtranite]

I use sortable directive to sort images like this:

with custom css :

.media-images-sortable {
  margin-left : -10px;
  .sortable-item,
  .sortable-placeholder {
    display     : inline-block;
    width       : 124px;
    height      : 110px;
    margin-left : 10px;
  }
}

but I can't drag & drop other item up to first item

Please add support horizontal mode. Thank!

[a5hik]

Hi Could you please provide your Sortable Directives structure (How u use/embed it in html). Just wanted to have a Look.

[minhtranite]

sortableOptions in controller:

...
scope.sortableOptions = {
            accept: function (sourceItemHandleScope, descSortableScope) {
              return sourceItemHandleScope.itemScope.sortableScope.$id === descSortableScope.$id;
            },
            orderChanged: function () {
              scope[scope.formName].file.$setViewValue(scope[scope.formName].file.$viewValue);
            }
          };
...

HTML structure:

...
<div id="media-images-{{formName}}" class="media-images-sortable"
         ng-show="files.length > 0" sortable="sortableOptions" ng-model="files">
      <div ng-repeat="file in files" sortable-item>
        <div class="thumbnail thumbnail-media-image" sortable-item-handle>
          <img class="thumb" width="100" height="100" ng-if="file.isNew"
               ng-src="{{file.dataSrc}}">
          <progressbar class="progress-striped active"
                       ng-show="file.process.value > 0 && !file.process.uploaded"
                       max="file.process.total" value="file.process.value"
                       ng-if="file.isNew">
            {{file.process.value}} / {{file.process.total}}
          </progressbar>
          <media-image-viewer
              image-src="/api/media/{{file.data.id}}/binaries/default_small.json"
              image-width="100" image-height="100"
              ng-if="!file.isNew"></media-image-viewer>
          <a class="remove" ng-click="imageRemove(file)"><i
              class="glyphicon glyphicon-remove-circle"></i></a>
        </div>
      </div>
    </div>
...

[a5hik]

Just wanted to check you use one sortable directive for your images and you are achieving the horizontal look only by CSS.

This is an interesting use case and I will definitely add support for horizontal mode. Thanks.

[a5hik]

@minhtdpro I had added the horizontal support, please install the latest version '1.1.0'. Let me know If this helps.

Also you no need to implement the 'accept' callback in your Controller as you are using only one sortable list and not moving items across columns, the default is always 'true'.

[minhtranite]

Thanks for help. It work perfect

[davidpelayo]

Do you have a jsfiddle or plunker with horizontal sorting working within one row?

Auto-responding to myself, I did solve the horizontal issue by setting the display inline-block to the .as-sortable-placeholder, like follows (in Stylus)

.as-sortable-placeholder
    border 1px dashed darkgrey
    box-sizing border-box
    background-color #dbdbdb
    display inline-block

[a5hik]

Hi , yeah you can achieve the horizontal by some css style tweaks. I have this info in the README.
Still I will update with the plunkr example.

[davidpelayo]

I saw the Plunkr example but wasn't that clear to me. However, I could solve it by my own. I would suggest to update that section of the README to make it clearer. Thanks for your response.