Since the list of items are inside the <div id="items"></div> container, we can't set a flexbox container on <sortable-list>. This is great use case for a custom css mixin.

On Android devices, If the sorting is disabled, Scrolling also gets disabled. Tested on chrome. Works fine on iOS Devices.

Code:

<sortable-list class="items-sortable" on-sort-finish="_onSortFinish" dragging="{{dragging}}"
          sortable=".item" items="{{someItemsSorted}}">
  <template is="dom-repeat" items="[[itemsUpdatableFromApi]]">
    <div class="item"> ....
  ...
...

This issue is that when itemsUpdatableFromApi variable is changing, and the order of them changed, the order of items in component keep not changed. However, the data in items is updating correctly.

To clarify the issue I will describe steps:

1. Items in sortable-list:

<div id="51">1</div>
<div id="52">2</div>
<div id="53">3</div>

2. Move item with id 53 up:

<div id="51">1</div>
<div id="53">3</div>
<div id="52">2</div>

3. Send API request on on-sort-finish to change the priorities (sort order)
4. Update the items (in code above we just change the property itemsUpdatableFromApi with data, fetched from API)

<div id="51">1</div>
<div id="52">3</div>
<div id="53">2</div>

So, the id is changed and this is the correct data, but the order of displaying should be changed too. Because from API I receive items correctly ordered by priority (1,2,3)). But when I refresh the page, the order of items is correct:

<div id="51">1</div>
<div id="53">2</div>
<div id="52">3</div>

By default, items in the list cannot be scrolled in mobile even though sortable-list is disabled! I found a way around by calling the _toggleListeners(false) inside sortable-list component which stops adding the event listeners. That makes the list scrollable in mobile!
If I _toggleListener(true), It adds the event listeners and makes the list sortable. But now if I call the _toggleListner(false) again with "false", it does removes the event listeners but list is not scrollable anymore.
Help would be much appreciated. thanks

I have my sortable list in a container element with overflow-y:auto, and it is inside a paper-dialog, and I notice that items are rendered outside their container and popup when they are being dragged.

I wonder if this is related to:

#9

I've been using this element for some time, and it generally works as advertised, but sometimes it seems to duplicate the item being dropped, adding to the list. It seems like the item being dragged isn't removed, so there is the original item still there, and a new one in the new position with a class 'draggable'. If I manually remove the original item in a 'sort-end' handler, then it seems to work fine.

Does this ring any bells? Any ideas for a 'real' fix?

TBH, I seem to have copied the element code, so I'm not sure what version I'm using - the source code has no record of the version. Is there a way to find out what version it is? I don't think I've changed it in any way.

First of all, a big thanks for all the work done in this web component. While on mobile, its hard to sort a medium size list of items because of the limited size of the screen, can we add an auto scrolling functionality? I've been working something out, and i'll be glad to make a pull request.

Hi guys, the component is great but we find out drag and drop doesn't work at all in firefox.
To test it we used Firefox 57.0.4

I've tried using sortable-list within an element that has been transformed (to be honest, just rotateZ(0)). This causes the width & height of the elements when dragging to be wrong by the difference between the top of the window and the sortable list.

sortable-list:
 -------------
|      first element (should be at top left)
|     -----------
|     |               |

Just noticed the last updates in master are not tagged with a release version yet.

Can you bump the minor version?

Can we disable the position of disabled sortable item using this component? For example I have this snippet:

<sortable-list sortable=".mcItem" id="mcList" on-items-changed="itemsOrder">
  <paper-item class="mcItem" value="[[dataMcTrendCross.rows.0.id]]" disabled="true">
    <div class="col m10">[[dataMcTrendCross.rows.0.MenuCategory.name]]</div>
  </paper-item>
  <template is="dom-repeat" items="[[dataMc.rows]]" as="mc">
    <paper-item class="mcItem" value="[[mc.id]]">
      <div class="col m10">[[mc.MenuCategory.name]]</div>
      <div class="col m2">
        <paper-icon-button icon="delete" id="[[mc.id]]" on-click="deleteMc" value="[[mc.id]]"></paper-icon-button>
      </div>
    </paper-item>
  </template>
  <paper-item class="mcItem" value="[[dataMcTrendCross.rows.1.id]]" disabled="true">
    <div class="col m10">[[dataMcTrendCross.rows.1.MenuCategory.name]]</div>
  </paper-item>
</sortable-list>

On that code, I already disabled the first and the last paper-items so those can't be dragged. But somehow the other paper-items inside the dom-repeat still can be dragged and replace the disabled paper-items position. How would I disable the position of the disabled paper-items so another active paper-items can't replace their position?

When I viewed the demo in Safari nothing rendered within the demo page aside from the header "Drag the Items". In chrome I can see the animal images but am unable to drag them.

Polymer-starter-kit, "2.0.0-rc.5", Chrome

Description

Using the demo code, if we add border or padding to <sortable-list>, its height grows while dragging an item. Of course there is workarounds or probably that's not the intended usage, but IMHO that's not a expected behavior.

Live Demo

http://jsbin.com/towofic/4/edit?html,output

In the demo, notice how the green box below is pushed down while dragging an item.