通過拖放重新排列DataView的項

Question

我有一個帶有以下模板的ExtJS DataView：

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

這使得每個項目列表如下所示：

用戶可以在其中單擊不同的圖標並執行相關操作，依次向上/向下移動並刪除。

請注意，這些項目是通過拖放操作添加到dataview的，這里還有另一個源dataview容器，我可以從中拖動這些項目並添加到此處。 雖然這些向上/向下箭頭可以很好地對它們進行重新排序，但我想在內部使用拖放功能對這些項目進行重新排序。

因此，為了使每個項目都可以在同一區域中拖放，我使用dataview的refresh事件和在此處注冊的DND如下：

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;
            };
        });
    }

但這給了我怪異的行為。 當我嘗試將“個人電子郵件”拖到“個人城市”頂部時，DataView損壞，看起來如下：

另外，我收到Uncaught TypeError: Cannot read property 'internalId' of undefined放置操作完成后， Uncaught TypeError: Cannot read property 'internalId' of undefined 。 我什至試圖removeAt()和insert()的調用推遲一定的時間，但是仍然沒有運氣，而且，ExtJS沒有可用的文檔或工作示例，可用於拖放n重新排序DataView項目。

任何幫助，將不勝感激，謝謝。

Answer 1

這讓我想起了在ExtJS 4中拖放時的不良體驗。無論如何，您可以嘗試使用此插件 。 否則，這是我嘗試過的東西（尚未處理滾動）（ 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);
    }
});