我正在尝试在 Ext JS 4 中实现一个可排序的列表。几乎与以下示例完全相同:
我知道可以使用网格拖放插件创建一个网格面板,这与此近似。但是,与上面的 jQuery UI 示例不同的是,该示例具有视觉上的糖果,例如当您在它们上方拖动时,项目会移开,并且实际看到您正在拖动的项目(网格拖放插件仅向您展示如何您拖动的许多行)。
Ext JS 中是否已经存在类似的东西?如果没有,解决此问题的最佳方法是什么?
我正在尝试在 Ext JS 4 中实现一个可排序的列表。几乎与以下示例完全相同:
我知道可以使用网格拖放插件创建一个网格面板,这与此近似。但是,与上面的 jQuery UI 示例不同的是,该示例具有视觉上的糖果,例如当您在它们上方拖动时,项目会移开,并且实际看到您正在拖动的项目(网格拖放插件仅向您展示如何您拖动的许多行)。
Ext JS 中是否已经存在类似的东西?如果没有,解决此问题的最佳方法是什么?
看看这个自定义的 D&D 示例,它可能不是您想要的,但它是一个很好的起点: http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/dd/dragdropzones。 html
仅使用普通<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>