Question

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

我知道可以创建一个带有Grid Drag Drop Plugin的Grid Panel，它近似于此。然而，与上面的jQuery UI示例的不同之处在于，该示例具有视觉效果，就像当您在其上方拖动时移动的项目，并且实际上看到您正在拖动的项目（网格拖放插件仅向您显示如何拖动的很多行。）

Ext JS中是否存在类似的内容？如果没有，最好的办法是什么？

Answer 1

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Ext JS 4中的可排序列表

2 个答案: