ember.js: use input range in Sortable list

Question

I would like to put an input range html5 element within a Sortable

When I test the Sortable by itself the elements are sortable, the onEnd event handler is called without problem.

When I test the input range by itself the value change is registered and the event handler is called without problem upon change.

The problem is that the input range does not work anymore (I mean the handle doesn't move anymore) when combining the Sortable and the input range together.

I've tried to filter the input range using filter option in Sortable without success.

I would be glad is someone could help me on this.

Here is my setup:

Ember : 1.10.0

Ember Data : 1.0.0-beta.16

jQuery : 1.11.2

Sortable : 1.1.1 (https://github.com/RubaXa/Sortable)

Here is my Handlebar template:

<ul {{bind-attr class=":dropdown-menu :map-layers-dropdown"}} id="map-layers-sortable">
  {{#each layer in tileLayers itemController="mtgLayer"}}
      <li {{bind-attr id=layer.identifier}}>
          <section>{{input type="checkbox" checked=layer.visible}}
            <span>{{layer.title}}</span>
            {{input class="mtg-layers-draggable range" type="range" name="range" min="0" max="100" value=layer.opacity}}
          </section>
      </li>
  {{/each}}
</ul>

Here is my Sortable configuration:

this.sortable = Sortable.create($("#map-layers-sortable")[0], {
  group: {name: "group", pull: false, put: false},  // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
  sort: true,  // sorting inside list
  disabled: false, // Disables the sortable if set to true.
  animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
  filter: ".mtg-layers-draggable",  // ".ignore-elements" Selectors that do not lead to dragging (String or Function)
  ghostClass: ".sortable-ghost",  // Class name for the drop placeholder

  scroll: true, // or HTMLElement
  scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  scrollSpeed: 10, // px

  // dragging ended
  onEnd: function (/**Event*/evt) {
    evt.oldIndex;  // element's old index within parent
    evt.newIndex;  // element's new index within parent
    // My Code after Sorting
  });
}

});

Answer 1

I've found a fix but that involves modiying the Sortable library.

I removed the evt.preventDefault(); call line 306. That was blocking event propagation to the input range

Sortable.js

306 - evt.preventDefault();