Перестановка пункты 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 с помощью Drag and Drop, где есть другой контейнер источника данных, из которого я перетаскиваю элементы и добавляю сюда. Хотя эти стрелки вверх/вниз работают нормально с их переупорядочиванием, я хочу изменить порядок этих элементов, используя внутреннюю перетаскивание.

Таким образом, чтобы каждый отдельный элемент перетаскиваемым и Droppable в той же области, я использовал refresh событие DataView и зарегистрированных DNDs там следующим образом:

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

Но это дает мне странное поведение; когда я пытаюсь перетащить «Человек Email» на вершине «Человек-Сити», DataView сломается выглядеть следующим образом:

Кроме того, я получаю Uncaught TypeError: Cannot read property 'internalId' of undefined, когда операция перетаскивания завершается. Я даже попробовал defer звонил removeAt() и insert() определенными мс, но все же не повезло, кроме того, у ExtJS нет документации или рабочего примера, доступных для Drag n Drop to Reorder элементов DataView.

Любая помощь будет оценена, спасибо.

Answer 1

Это напоминает мне a bad experience У меня было с перетаскиванием в ExtJS 4. В любом случае, вы можете попробовать это plugin. В противном случае, вот что-то я попробовал (свиток еще не обработано) (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); 
    } 
});