使用拖放功能重新排列DataView的项目 [英] Rearrange items of DataView with Drag and Drop

问题描述

我有一个带有以下模板的ExtJS DataView：

I have an ExtJS DataView with following template:

<ul>
    <tpl for=".">
        <li class="report-field" id="{listId}">
            {[this.getReorderLinks(values, xindex, xcount)]}
            <span class="field-title small" data-qtip="{displayName}">{displayName}</span>
            <i class="field-remove" title="' + deleteLabel + '"></i>
        </li>
    </tpl>
</ul>

这使得每个项目列表如下所示：

Which makes each list of items look like this:

其中用户可以点击不同的图标并执行相关操作，按顺序上下移动。

Where user can click on different icons and perform related action, moving up/down in order and remove.

请注意，这些项目将使用拖放功能添加到dataview中，其中还有另一个源数据视图容器，从中拖动项目并将其添加到此处。虽然这些向上/向下的箭头正在重新排序，但我想通过内部拖放来重新排列这些项目。

Note that these items are added to dataview using Drag and Drop, where there's another source dataview container from which I drag the items and add here. While these up/down arrows are working fine with reordering them, I want to reorder these items using drag-n-drop internally.

所以，让每个单独的项目拖动在同一地区，我使用了$ code>刷新 dataview事件和注册的DND，如下所示：

So, to make each individual item draggable and droppable in the same region, I used refresh event of dataview and registered DNDs there as follows:

listeners: {
    'refresh': function(dataview, eOpts) {
        var fieldsList = Ext.query('.added-field');

        // Iterate over the list and make each item draggable/droppable.
        Ext.each(fieldsList,function(field){
            var dragSource,
                fieldId;

            fieldId = field.id;

            dragSource = new Ext.dd.DragSource(field, {
                isTarget  : false
            });

            dropZone = new Ext.dd.DropTarget(field);

            dragSource.dragData = {
                record: me.viewStore.findRecord('listId', fieldId),
                fieldId: fieldId
            };

            dropZone.notifyDrop = function(source, event, params) {
                var targetRecord = me.viewStore.findRecord('listId', fieldId),
                    targetRecordIdx = me.viewStore.indexOf(targetRecord),
                    sourceRecordIdx = me.viewStore.indexOf(params.record);

                //Perform rearrangement in the store.
                me.viewStore.removeAt(sourceRecordIdx);
                me.viewStore.insert(targetRecordIdx, params.record);
                return true;
            };
        });
    }

但它是给我奇怪的行为;当我尝试拖动Person City的Person Email时，DataView被破坏，看起来如下：

But it is giving me weird behaviours; when I try to drag "Person Email" on top of "Person City", DataView gets broken to look like following:

另外，我得到未捕获TypeError：无法读取属性'内部标识为未定义的。我甚至试图将某些ms 调用 removeAt（）和 insert（） ，但仍然没有运气，而且ExtJS没有文件或工作示例可用于Drag n Drop重新排序DataView项目。

Also, I get Uncaught TypeError: Cannot read property 'internalId' of undefined when drop operation completes. I even tried to defer calls to removeAt() and insert() by certain ms, but still no luck, moreover, ExtJS has no documentation or working example available for Drag n Drop to Reorder DataView items.

任何帮助将不胜感激，谢谢。 p>

Any help would be appreciated, thanks.

推荐答案

这让我想起糟糕的经历我在ExtJS 4中拖了下来。无论如何，你可以尝试这个插件。否则，这里是我尝试过的东西（滚动尚未处理）（ jsFiddle ）：

This reminds me a bad experience I had with drag drop in ExtJS 4. Anyway, you may try this plugin. Otherwise, here is something I have tried (scroll is not handled yet) (jsFiddle) :

new Ext.view.DragZone({
    view: view,
    ddGroup: 'test',
    dragText: 'test'
});

new Ext.view.DropZone({
    view: view,
    ddGroup: 'test',
    handleNodeDrop : function(data, record, position) {
        var view = this.view,
            store = view.getStore(),
            index, records, i, len;
        if (data.copy) {
            records = data.records;
            data.records = [];
            for (i = 0, len = records.length; i < len; i++) {
                data.records.push(records[i].copy(records[i].getId()));
            }
        } else {
            data.view.store.remove(data.records, data.view === view);
        }
        index = store.indexOf(record);
        if (position !== 'before') {
            index++;
        }
        store.insert(index, data.records);
        view.getSelectionModel().select(data.records);
    }
});

这篇关于使用拖放功能重新排列DataView的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！