森查触觉SortableList

Question

http://docs.sencha.com/touch/2.3.1/#!/api/Ext.plugin.SortableList

更新问题：

代码：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var templ = new Ext.XTemplate(
      '<tpl if="isActive">',
            '<div style="color:red" class="',
            Ext.baseCSSPrefix + 'list-sortablehandle',
            '">',
        '</tpl>',    
    '<b>Name: {text}</b>',
        '<tpl if="isActive">',
            '</div>',
        '</tpl>',
            {
                // XTemplate configuration:
                compiled: true,
                // member functions:
                isitem2: function (name) {
                    return name == 'item2';
                },
            }
);

        Ext.Viewport.add({
            xtype: 'list',
            itemId: 'dynamicContainer',
            infinite: true,
            plugins: 'sortablelist',
            itemTpl: templ,//'<span style="width:30px;height:20px;background-color:gray;display:block;float:left;" class="' + Ext.baseCSSPrefix + 'list-sortablehandle"></span>{text}',
            listeners: [{
                event: 'dragsort',
                fn: function (list, row, from, to) {
                    console.log(to);
                }
            }],
            data: [{
                text: 'Item 1-Active',
                isActive:true
            }, {
                text: 'Item 2-Active',
                isActive: true
            },
             {
                text: 'Item 3-Active',
                isActive: true
            }, {
                text: 'Item 4',
                isActive: false
            },
                  {
                text: 'Item 5',
                isActive: false
            }]
        });

    }
});

见行动:https://fiddle.sencha.com/#fiddle/3kl

在@mishoboss https://stackoverflow.com/a/21762299/1405008的帮助下

我做了几乎(70%)做了我想做的，但我需要限制名单内容的黑色不应由用户重新安排，我限制用户拖动特定的单元格，但当用户拖动其他单元格时，他们可以放置不活动的单元格位置重新排序该单元格。但情况不应该是这样。

正如在我所附的屏幕上，红色箭头标记的列表底部不应该排序。

老问题，，我看了sencha触摸文档，那里有内置的插件，叫做SortableList.But，他们从来没有给出过，以及如何使用这个插件的示例源代码。

​

​

不允许按用户Yello:Sortable列表项拖动和排序的列表项：红色

我知道这很容易通过jquery.实现。

但我从来没有得到任何想法或样本来实现这一点，通过感应器触摸插件。

另外，我不想将Jquery添加到我的应用程序中，因为它可能会在使用sencha框架时导致性能问题。

注意事项：我也希望用户点击并持有列表来拖动，而不仅仅是拖动，因为它会影响默认滚动行为。救命求你了！

Answer 1

我也玩了好几个小时了。我就是这样做的：

                    xtype: 'list',
                    plugins:'sortablelist',
                    itemTpl: '<span class="'+Ext.baseCSSPrefix + 'list-sortablehandle"></span>{text}',
                    listeners: [
                        {
                            event: 'dragsort',
                            fn: function(list, row, from, to){
                                alert(to);
                            }
                        }
                    ],
...

注意，您需要一个“句柄”才能工作。句柄是您点击的区域，列表项将成为可拖动的。句柄的默认选择器是

'.' + Ext.baseCSSPrefix + 'list-sortablehandle'

您可以使用handleSelector参数定义不同的选择器。

然而，我无法使它发挥作用，因为它应该起作用。列表项变得可拖放，但它们不需要重新排序。要么是有问题，要么是我还漏掉了什么。如果你有任何成功，请在这里发帖子。

编辑:我刚刚在Sencha：https://fiddle.sencha.com/fiddle/3k3/preview上再测试了一次

还是不像预期的那样工作。