Ext JS 4 中的可排序列表答案

【问题标题】：Sortable lists in Ext JS 4Ext JS 4 中的可排序列表
【发布时间】：2013-06-11 09:45:46
【问题描述】：

我正在尝试在 Ext JS 4 中实现一个可排序的列表。几乎与以下示例完全相同：

我知道可以使用网格拖放插件创建一个网格面板，这与此类似。但是，与上面的 jQuery UI 示例不同的是，该示例具有视觉上的糖果，例如当您在它们上方拖动时，项目会移开，并且实际看到您正在拖动的项目（网格拖放插件仅向您展示如何你拖了很多行）。

Ext JS 中是否已经存在类似的东西？如果没有，解决此问题的最佳方法是什么？

【问题讨论】：

标签： javascript jquery-ui extjs user-interface sencha-architect

【解决方案1】：

看看这个自定义的 D&D 示例，它可能不是您想要的，但它是一个很好的起点： http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/dd/dragdropzones.html

【讨论】：

【解决方案2】：

使用简单的<ul> 并在其上实例化HTML5sortable 或rubaxa-sortable 可能更容易。 Rubaxa Sortable 与 CSS 无关，可以与其他库很好地配合使用。

new Sortable(document.getElementsByClassName('sortable')[0]);

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Sortable -->
<script src="https://rawgit.com/RubaXa/Sortable/master/Sortable.js"></script>

<ul class="list-group sortable">
  <li class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></li>
  <li class="list-group-item">It works with Bootstrap...</li>
  <li class="list-group-item">...out of the box.</li>
  <li class="list-group-item">It has support for touch devices.</li>
  <li class="list-group-item">Just drag some elements around.</li>
</ul>

【讨论】：