Question

我想在可排序

中添加输入范围html5 元素

当我单独测试 Sortable 元素是可排序的时，onEnd事件处理程序被称为而没有问题。

当我单独测试输入范围时，会更改值更改，并在更改时将事件处理程序称为而不会出现问题。

问题是当可排序和输入范围组合时，输入范围不再起作用（我的意思是句柄不再移动） 在一起。

我尝试使用可排序中的过滤器选项过滤输入范围，但没有成功。

我很高兴有人能帮助我。

以下是我的设置：

Ember：1.10.0

Ember数据：1.0.0-beta.16

jQuery：1.11.2

可排序：1.1.1（https://github.com/RubaXa/Sortable）

这是我的Handlebar模板：

<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>

以下是我的可排序配置：

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

我找到了修复程序但涉及修改Sortable库。

我删除了evt.preventDefault（）;调用线306.这阻止了事件传播到输入范围

Sortable.js

306 - evt.preventDefault（）;

ember.js：在可排序列表中使用输入范围

1 个答案: